Getting the value of a dropdown menu using jQuery

Question

I have added a little drop down menu to a webpage:

function addDropDownMenu() {
        var positionMenu = $(
            "<form class='drop_down_menu'>" +
                "<select name='roles'>" +
                    "<option value='notSelected'>Not Selected</option>"+
                    "<option value='relevant'>Relevant</option>"+
                    "<option value='notRelevant'>Not Relevant</option>" + 
                "</select>" +
            "</form>");

        $('#profile-experience .position').prepend(positionMenu)
    }

I am trying to get the value of either Relevant or Not Relevant.

However, when I run this code I keep getting an empty string.

var x = $('.drop_down_menu')[0]
// x is the form
$(x).val()

returns ""

What am I missing? Doing wrong?

took me a while to figure out what was happening. For some reason the debugger was focusing on an iFrame and thus why it kept returning empty. All of these answers worked :-) — dropWizard
– dropWizard, Commented Sep 18, 2017 at 17:02

Christos · Accepted Answer · 2017-09-17 19:05:15Z

3

You could try this:

var selectedValue = $('.drop_down_menu>select').val();

var selectedValue = $('.drop_down_menu>select').val();
console.log('The selected value is: '+ selectedValue);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form class='drop_down_menu'>
  <select name='roles'>
  <option value='notSelected'>Not Selected</option>
  <option value='relevant' selected>Relevant</option>
  <option value='notRelevant'>Not Relevant</option>
  </select>
</form>

edited Sep 17, 2017 at 19:05

answered Sep 17, 2017 at 19:02

Christos

54.1k9 gold badges82 silver badges114 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Mihai Alexandru-Ionut · Accepted Answer · 2017-09-17 19:13:58Z

0

$('.drop_down_menu') statement returns a jquery element with the properties and methods corresponding to it, but $('.drop_down_menu')[0] just returns the HTML DOM element.

You have to use value property in order to obtain the value of select element.

console.log($('select')[0].value);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name='roles'>
  <option value='notSelected'>Not Selected</option>
  <option value='relevant' selected>Relevant</option>
  <option value='notRelevant'>Not Relevant</option>
  </select>

Your example does not work because you have to use a selector for select element

var x = $('.drop_down_menu > select')[0]
console.log($(x).val());

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form class='drop_down_menu'>
          <select name='roles'>
              <option value='notSelected'>Not Selected</option>
              <option value='relevant' selected>Relevant</option>
              <option value='notRelevant'>Not Relevant</option> 
          </select>
</form>

edited Sep 17, 2017 at 19:13

answered Sep 17, 2017 at 19:07

Mihai Alexandru-Ionut

48.6k14 gold badges106 silver badges132 bronze badges

4 Comments

Mihai Alexandru-Ionut Over a year ago

Please explain your downvote...Why some people downvotes correct answers ?

dropWizard Over a year ago

what does the > select do?

Mihai Alexandru-Ionut Over a year ago

this get the direct descendent of form element which is select

Mihai Alexandru-Ionut Over a year ago

you could also use children method.. $('.drop_down_menu').children('select')

ebnibrahem · Accepted Answer · 2017-09-17 19:17:43Z

0

var _val = $("[name='roles']").val();
console.log(_val);

edited Sep 17, 2017 at 19:17

answered Sep 17, 2017 at 19:10

ebnibrahem

1091 silver badge4 bronze badges

2 Comments

ebnibrahem Over a year ago

you need : Getting the value of a dropdown menu using jQuery.

Obsidian Age Over a year ago

While answers are always appreciated, it really helps to provide some additional info regarding how your code solves the problem at hand. Doing so aids those with similar (but not identical) problems. Not everyone may be familiar with your exact coding logic, but may understand your general approach or concept. To help improve your answer, please provide some context surrounding it, and see the help article on writing great answers for some tips on how to make your answers count :)

Collectives™ on Stack Overflow

Getting the value of a dropdown menu using jQuery

3 Answers 3

Comments

4 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

4 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related