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?
asked Sep 17, 2017 at 18:59
dropWizard
3,55812 gold badges71 silver badges95 bronze badges
3 Answers 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>
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
$('.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>
answered Sep 17, 2017 at 19:07
Mihai Alexandru-Ionut
48.6k14 gold badges106 silver badges132 bronze badges
4 Comments
Mihai Alexandru-Ionut
Please explain your downvote...Why some people downvotes correct answers ?
dropWizard
what does the
> select do?Mihai Alexandru-Ionut
this get the
direct descendent of form element which is selectMihai Alexandru-Ionut
you could also use
children method.. $('.drop_down_menu').children('select')var _val = $("[name='roles']").val();
console.log(_val);
2 Comments
ebnibrahem
you need : Getting the value of a dropdown menu using jQuery.
Obsidian Age
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 :)
lang-js
$('.drop_down_menu select').val()