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.

Both of those should work. The problem must be somewhere else (e.g. is that code wrapped in a `$(document).ready(...` block?) — karim79, May 06 '10 at 11:12
Nope - `$('#dropDownId').val();` is the most concise way to get the selected value. — karim79, May 06 '10 at 11:13
@shyam you don't need select in this statement since IDs are unique for document, you should use tag name only when refering to classes`select#dropDownId option:selected`, — ant, May 06 '10 at 11:13
possible duplicate of [How to get the Index of select->option tag](http://stackoverflow.com/questions/1817079/how-to-get-the-index-of-select-option-tag) — Chris Moschini, Mar 24 '14 at 08:35
Refer this article : http://javascriptstutorial.com/blog/selecting-dropdown-element-using-javascript-or-jquery/ — , May 27 '16 at 12:08
One can refer this article: http://javascriptstutorial.com/blog/selecting-dropdown-element-using-javascript-or-jquery/ — Dilip Kumar Yadav, Oct 18 '16 at 12:01

Peter McG · Accepted Answer · 2010-05-06T20:35:23.423

942

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

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

To get the currently selected text:

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

edited May 06 '10 at 20:35

answered May 06 '10 at 11:11

Peter McG

18,857
8
45
53

11

You need a space before `:selected`. – interjay May 06 '10 at 11:15
57

the **fastest** way of getting the text of the selected option is: `$("#dropDownId").children("option").filter(":selected").text()` – RickardN Mar 21 '13 at 10:22
3

i wish you had linked references to `.val()` and `.text()` – shareef Jul 09 '13 at 13:35
9

Richard, your code is too long...it can be much more concise for readability – PositiveGuy Feb 13 '14 at 21:47
and how to know which index is selecteD? – Muneem Habib Mar 24 '15 at 05:38
In Share Point 2010 where id gets renamed, this works. $("[id$='dropDownId']").val() and $("[id$='dropDownId']").children("option").filter(":selected").text() thanks RickardN – wirble Jul 09 '15 at 14:46
What if you don't know the id of the ` – James M. Lay Aug 15 '15 at 22:07
2

@JamesM.Lay a DOM reference stored in a variable? Then use ``jQuery(domVariable).val()`` – Allen Linatoc Apr 26 '16 at 00:45
http://javascriptstutorial.com/blog/selecting-dropdown-element-using-javascript-or-jquery/ – Dilip Kumar Yadav Oct 18 '16 at 12:01
@RickardN 's comment here should have been the accepted answer!!! It's the only thing that's worked for me. – jtylerm Jan 07 '20 at 19:02
argument type string is not assignable to parameter type for @RickardN 's answer – mLstudent33 Nov 09 '20 at 06:45
also what is a "single select dom element"? Do you mean the one and only select element in a DOM that happens to be selected? – mLstudent33 Nov 09 '20 at 06:53

score 62 · Answer 2 · edited Jul 01 '15 at 05:48

62

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

edited Jul 01 '15 at 05:48

Ajay2707

5,690
6
40
58

answered May 06 '10 at 11:20

Nick Reeve

1,658
2
22
32

5

"value" is what most coders miss, while declaring elementsand query keeps on returning text instead – Asad Sep 16 '14 at 02:40

Lucky · Answer 3 · 2015-09-02T06:28:15.810

27

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

edited Sep 02 '15 at 06:28

answered Dec 23 '12 at 10:57

Lucky

16,787
19
117
151

score 14 · Answer 4 · edited Mar 12 '13 at 10:32

14

try this

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

edited Mar 12 '13 at 10:32

Taryn

242,637
56
362
405

answered Mar 12 '13 at 10:03

Kvadiyatar

929
14
29

OP is asking for selected value. This answer would get the text content of the drop down. Not wrong, just not what he was asking for. – Joshua Dance May 19 '14 at 20:07

score 13 · Answer 5 · answered May 08 '14 at 22:22

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!

score 9 · Answer 6 · answered May 23 '14 at 05:51

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>

score 8 · Answer 7 · answered Mar 03 '13 at 07:12

8

this will do the trick

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

answered Mar 03 '13 at 07:12

Singleton

3,701
3
24
37

score 8 · Answer 8 · answered Oct 11 '13 at 19:55

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>

score 5 · Answer 9 · edited Feb 15 '17 at 18:25

5

Try this, it gets the value:

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

edited Feb 15 '17 at 18:25

AzNjoE

733
3
9
18

answered Jun 23 '16 at 13:37

Ângelo Rigo

2,039
9
38
69

score 4 · Answer 10 · edited Jul 15 '21 at 10:37

    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>

score 3 · Answer 11 · edited Oct 23 '15 at 10:01

3

use

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

This should work :)

edited Oct 23 '15 at 10:01

fubo

44,811
17
103
137

answered Nov 18 '13 at 10:33

Namila

754
4
8

score 3 · Answer 12 · answered May 06 '10 at 11:15

3

Did you supply your select-element with an id?

<select id='dropDownId'> ...

Your first statement should work!

answered May 06 '10 at 11:15

schaechtele

1,130
1
9
12

score 3 · Answer 13 · edited Jan 19 '16 at 00:17

3

For selected text use:

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

For selected value use:

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

edited Jan 19 '16 at 00:17

Michał Perłakowski

88,409
26
156
177

answered Jan 18 '16 at 23:51

mahi

41
1

score 2 · Answer 14 · edited Jul 03 '13 at 08:23

2

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.

edited Jul 03 '13 at 08:23

Avi

21,182
26
82
121

answered Jul 03 '13 at 08:00

VenkeHV

21
2

score 2 · Answer 15 · answered Feb 22 '14 at 06:44

2

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

answered Feb 22 '14 at 06:44

mindmyweb

888
9
13

score 2 · Answer 16 · answered Aug 22 '14 at 13:28

2

Or if you would try :

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

I used It today and It working fine.

answered Aug 22 '14 at 13:28

SoLiD

31
7

score 2 · Answer 17 · edited Sep 13 '16 at 07:34

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;
}

score 2 · Answer 18 · edited Oct 25 '17 at 10:08

2

Try this:

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

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

edited Oct 25 '17 at 10:08

Mohammad Anini

5,073
4
35
46

answered Oct 25 '17 at 09:22

saravanajd

181
1
4

score 2 · Answer 19 · answered May 16 '18 at 12:13

2

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();

answered May 16 '18 at 12:13

Du-Lacoste

11,530
2
71
51

score 1 · Answer 20 · edited Mar 14 '14 at 06:34

1

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

try this

edited Mar 14 '14 at 06:34

The Hungry Dictator

3,444
5
37
53

answered Mar 14 '14 at 06:07

rakesh

11
2

score 1 · Answer 21 · edited Apr 18 '14 at 09:12

1

use either of these codes

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

OR

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

edited Apr 18 '14 at 09:12

Pavan

33,316
7
50
76

answered Apr 18 '14 at 08:52

Bipin

51
3

score 1 · Answer 22 · edited Dec 09 '16 at 13:23

1

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

Or

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

Above codes worked well for me

edited Dec 09 '16 at 13:23

Jishnu V S

8,164
7
27
57

answered Jul 02 '15 at 13:04

Stefan Kelchtermans

13
4

score 1 · Answer 23 · answered Oct 28 '15 at 12:06

1

This is what works

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

answered Oct 28 '15 at 12:06

Shittu Joseph Olugbenga

6,396
5
26
37

Suresh Burdak · Answer 24 · 2016-04-12T12:47:55.620

0

You can use any of these:

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

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

            //OR

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

});

edited Apr 12 '16 at 12:47

answered Apr 08 '16 at 13:37

Suresh Burdak

9
3

score 0 · Answer 25 · edited Feb 15 '17 at 18:05

0

You need to put like this.

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

edited Feb 15 '17 at 18:05

AzNjoE

733
3
9
18

answered Jan 09 '17 at 14:08

Arthur Salgado

49
1
2

score 0 · Answer 26 · edited Dec 30 '17 at 09:29

0

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);`
            });
});

edited Dec 30 '17 at 09:29

RedBassett

3,469
3
32
56

answered Dec 30 '17 at 05:16

UTHIRASAMY

1
2

Ruzaik Nazeer · Answer 27 · 2020-10-05T09:13:41.613

0

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)
  });

edited Oct 05 '20 at 09:13

answered May 27 '18 at 16:47

Ruzaik Nazeer

474
2
12

What if your dropdown option was marked as selected programmatically (like from an ajax request that populates a dropdown)? If you try to get a .val(), you will get null for the value (even though inspecting the source will show you that the option is, indeed, selected)! $("myDD option:selected").val() will yield undefined. – MC9000 Nov 14 '19 at 04:36
it is the fastest way to access an element which presents during the page load the $(document).on change will rescan the document once again to find the programmatically added elements I think for his question my answer is much more appropriate. – Ruzaik Nazeer Dec 15 '20 at 09:30

score 0 · Answer 28 · answered Dec 10 '18 at 21:41

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;
    }

score 0 · Answer 29 · answered Aug 06 '19 at 09:36

0

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;

answered Aug 06 '19 at 09:36

mahdi hosseini

21
3

Please include an explanation of how and why this solves the problem would really help to improve the quality of your post, and probably result in more up-votes. – Android Aug 06 '19 at 10:07

score 0 · Answer 30 · answered Jan 06 '23 at 17:00

0

Using below line of code we can get the dropdownList value .this will work

var getValue = document.getElementById("<%=ddlID.ClientID%>").value;

answered Jan 06 '23 at 17:00

Er.Manoj Singh

31
2

score -1 · Answer 31 · edited Feb 08 '18 at 04:44

$("#dropDownId").val('2');
var SelectedValue= $("#dropDownId option:selected").text();
$(".ParentClass .select-value").html(SelectedValue);


<p class="inline-large-label button-height ParentClass" >
     <label for="large-label-2" class="label">Country <span style="color: Red;">*</span><small></small></label>
     <asp:DropDownList runat="server" ID="dropDownId " CssClass="select" Width="200px">          
    </asp:DropDownList>
</p>

Get selected value of a dropdown's item using jQuery

31 Answers31

Linked

Related