Get selected value of a dropdown's item using jQuery
Get selected value of a dropdown's item using jQuery
Question
How can I get the selected value of a dropdown box using jQuery?
I tried using
var value = $('#dropDownId').val();
and
var value = $('select#dropDownId option:selected').val();
but both return an empty string.
Accepted Answer
For single select dom elements, to get the currently selected value:
$('#dropDownId').val();
To get the currently selected text:
$('#dropDownId :selected').text();
Read more… Read less…
var value = $('#dropDownId:selected').text()
Should work fine, see this example:
$(document).ready(function(){
$('#button1').click(function(){
alert($('#combo :selected').text());
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="combo">
<option value="1">Test 1</option>
<option value="2">Test 2</option>
</select>
<input id="button1" type="button" value="Click!" />
Try this jQuery,
$("#ddlid option:selected").text();
or this javascript,
var selID=document.getElementById("ddlid");
var text=selID.options[selID.selectedIndex].text;
If you need to access the value and not the text then try using val()
method instead of text()
.
Check out the below fiddle links.
I know this is a terribly old post and I should probably be flogged for this pitiful resurrection, but I thought I would share a couple of VERY helpful little JS snippets that I use throughout every application in my arsenal...
If typing out:
$("#selector option:selected").val() // or
$("#selector option:selected").text()
is getting old, try adding these little crumpets to your global *.js
file:
function soval(a) {
return $('option:selected', a).val();
}
function sotext(a) {
return $('option:selected', a).text();
}
and just write soval("#selector");
or sotext("#selector");
instead! Get even fancier by combining the two and returning an object containing both the value
and the text
!
function so(a) {
my.value = $('option:selected', a).val();
my.text = $('option:selected', a).text();
return my;
}
It saves me a ton of precious time, especially on form-heavy applications!
This will alert the selected value. JQuery Code...
$(document).ready(function () {
$("#myDropDown").change(function (event) {
alert("You have Selected :: "+$(this).val());
});
});
HTML Code...
<select id="myDropDown">
<option>Milk</option>
<option>Egg</option>
<option>Bread</option>
<option>Fruits</option>
</select>