Advertisement
Advertisement


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.

2015/05/14
1
448
5/14/2015 9:17:26 AM

Accepted Answer

For single select dom elements, to get the currently selected value:

$('#dropDownId').val();

To get the currently selected text:

$('#dropDownId :selected').text();
2010/05/06
847
5/6/2010 8:35:23 PM

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!" />

2015/07/01

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.

Demo1 | Demo2

2015/09/02

try this

$("#yourDropdown option:selected").text();
2013/03/12

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!

2014/05/08

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>
2014/05/23

Source: https://stackoverflow.com/questions/2780566
Licensed under: CC-BY-SA with attribution
Not affiliated with: Stack Overflow
Email: [email protected]