Get selected value of a dropdown's item using jQuery

Jquery Problem Overview

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.

Jquery Solutions

Solution 1 - Jquery

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

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

To get the currently selected text:

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

Solution 2 - Jquery

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

Solution 3 - Jquery

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

Solution 4 - Jquery

try this

$("#yourDropdown option:selected").text();

Solution 5 - Jquery

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!

Solution 6 - Jquery

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>

Solution 7 - Jquery

this will do the trick

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

Solution 8 - Jquery

Yet another tested example:

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
    $('#bonus').change(function() {
    alert($("#bonus option:selected").text());
  });  
});
</script>
</head>

<body>
<select id="bonus">
<option value="1">-$5000</option>
<option value="2">-$2500</option>
<option value="3">$0</option>
<option value="4">$1</option>
<option value="5">We really appreciate your work</option>
</select>
</body>
</html>

Solution 9 - Jquery

Try this, it gets the value:

$('select#myField').find('option:selected').val();

Solution 10 - Jquery

Did you supply your select-element with an id?

<select id='dropDownId'> ...

Your first statement should work!

Solution 11 - Jquery

use

$('#dropDownId').find('option:selected').val()

This should work :)

Solution 12 - Jquery

For selected text use:

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

For selected value use:

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

Solution 13 - Jquery

	function fundrp(){
	var text_value = $("#drpboxid option:selected").text();  
	console.log(text_value);
	var val_text = $("#drpboxid option:selected").val();  
	console.log(val_text);
	var value_text = $("#drpboxid option:selected").attr("value") ;
	console.log(value_text);
	var get_att_value = $("#drpboxid option:selected").attr("id") 
	console.log(get_att_value);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<select id="drpboxid">
	<option id="1_one" value="one">one</option>
	<option id="2_two" value="two">two</option>
	<option id="3_three" value="three">three</option>              
</select>
<button id="btndrp" onclick="fundrp()">Tracking Report1234</button>

Solution 14 - Jquery

The id that got generated for your drop down control in the html will be dynamic one. So use the complete id $('ct100_<Your control id>').val(). It will work.

Solution 15 - Jquery

I know this is old but I though I update this with an more up to date answer

$( document ).on( 'change', '#combo', function () {
var prepMin= $("#combo option:selected").val();
 alert(prepMin);
});

I hope this helps

Solution 16 - Jquery

Or if you would try :

$("#foo").find("select[name=bar]").val();

I used It today and It working fine.

Solution 17 - Jquery

To get the jquery value from drop down you just use below function just sent id and get the selected value:

function getValue(id){
	var value = "";
	if($('#'+id)[0]!=undefined && $('#'+id)[0]!=null){
		for(var i=0;i<$('#'+id)[0].length;i++){
			if($('#'+id)[0][i].selected == true){
				if(value != ""){
					value = value + ", ";
				}
				value = value + $('#'+id)[0][i].innerText;
			}
		}
	}
	return value;
}

Solution 18 - Jquery

Try this:

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

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

Solution 19 - Jquery

You can do this by using following code.

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

If you want to get the selected value from the select list`s options. This will do the trick.

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

Solution 20 - Jquery

$("select[id$=dropDownId]").val()

try this

Solution 21 - Jquery

use either of these codes

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

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

Solution 22 - Jquery

$("#selector <b>></b> option:selected").val()

$("#selector <b>></b> option:selected").text()

Above codes worked well for me

Solution 23 - Jquery

This is what works

    var value= $('option:selected', $('#dropDownId')).val();

Solution 24 - Jquery

You can use any of these:

$(document).on('change', 'select#dropDownId', function(){
   
            var value = $('select#dropDownId option:selected').text();

            //OR

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

});

Solution 25 - Jquery

You need to put like this.

$('[id$=dropDownId] option:selected').val();

Solution 26 - Jquery

Use the method below to get the selected value on page load:

$(document).ready(function () {
$('#ddlid').on('change', function () {
                var value = $('#ddlid :selected').text();
                alert(value);`
            });
});

Solution 27 - Jquery

For Normal Page loaded dropdowns

  $("#dropDownId").on('change',function(){
     var value=$(this).val();
     alert(value);
  });

for dynamically added options Make sure to keep the id unique

  $(document).on('change','#dropDownId',function(){
    var value=$(this).val();
    alert(value)
  });

Solution 28 - Jquery

If you have more than one dropdown try:

HTML:

<select id="dropdown1" onchange="myFunction(this)">
    <option value='...'>Option1
    <option value='...'>Option2
</select>
<select id="dropdown2" onchange="myFunction(this)">
    <option value='...'>Option1
    <option value='...'>Option2
</select>

JavaScript:

	function myFunction(sel) {
		var selected = sel.value;
	}

Solution 29 - Jquery