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

Answer 1

You can use any of these:

$(document).on('change', 'select#dropDownId', function(){

            var value = $('select#dropDownId option:selected').text();

            //OR

            var value = $(this).val();

});

Answer 2

HTML:

<select class="form-control" id="SecondSelect">
       <option>5<option>
       <option>10<option>
       <option>20<option>
       <option>30<option>
</select>

JavaScript:

var value = $('#SecondSelect')[0].value;

Answer 3

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

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

To get the currently selected text:

$('#dropDownId :selected').text();

Answer 4

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

Answer 5

Try this:

 $('#dropDownId option').filter(':selected').text();     

 $('#dropDownId option').filter(':selected').val();

Answer 6

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>