Get the value of a dropdown in jQuery

Question

I have a drop down that has an 'ID, Name' Pair.

Example

Jon Miller
Jim Smith
Jen Morsin

Jon MIller has ID of 101
Jim Smith has ID of 102
Jen Morsin has ID of 103

When I do the followng:

var arNames = $('#Crd').val()

and I select Jon Miller, I get 101. I'd like to get Jon Miller though.

Check out http://stackoverflow.com/questions/1643227/jquery-get-selected-text-from-dropdownlist — Franz, Jan 23 '12 at 20:50

score 211 · Accepted Answer · answered Jan 23 '12 at 20:49

211

$('#Crd').val() will give you the selected value of the drop down element. Use this to get the selected options text.

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

answered Jan 23 '12 at 20:49

ShankarSangoli

69,612
13
93
124

3

$('#Crd option:selected').text() or $('#Crd option:selected').val(), .text gives you the value of the displayed text, not the value – Patrick Guimalan Nov 22 '13 at 01:53
$('#Crd option:selected').val(); for value – asifaftab87 Mar 22 '19 at 08:08

score 14 · Answer 2 · edited Jun 19 '13 at 19:27

14

The best way is to use:

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

Depending on the requirement, you could also use this way:

var v = $("#yourid").val();
$("#yourid option[value="+v+"]").text()

edited Jun 19 '13 at 19:27

Andy T

10,223
5
53
95

answered May 20 '13 at 14:25

Sandeep Pal

2,067
1
16
14

score 6 · Answer 3 · answered Apr 19 '17 at 06:02

6

This has worked for me!

$('#selected-option option:selected').val()

Hope this helps someone!

answered Apr 19 '17 at 06:02

N00b Pr0grammer

4,503
5
32
46

Ansel Santosa · Answer 4 · 2012-01-23T21:03:13.883

5

If you're using a <select>, .val() gets the 'value' of the selected <option>. If it doesn't have a value, it may fallback to the id. Put the value you want it to return in the value attribute of each <option>

Edit: See comments for clarification on what value actually is (not necessarily equal to the value attribute).

edited Jan 23 '12 at 21:03

answered Jan 23 '12 at 20:51

Ansel Santosa

8,224
1
28
39

1

Just a clarification, .val() returns the *live value property* not the HTML attribute value. – Chad Jan 23 '12 at 20:53
Correct. However there is no practical difference in this case as the OP does not seem to want to change the `value`s at any point. – Ansel Santosa Jan 23 '12 at 20:57
2

`.val() gets the 'value' attribute of the selected – Chad Jan 23 '12 at 20:58
What if I need the index or id rather than the text? – bgmCoder Nov 14 '15 at 20:49

score 4 · Answer 5 · answered Nov 12 '15 at 06:21

4

Try this:

var text = $('#YourDropdownId').find('option:selected').text();

answered Nov 12 '15 at 06:21

fbarikzehy

4,885
2
33
39

score 4 · Answer 6 · edited Jan 04 '18 at 09:44

4

Another option:

$("#<%=dropDownId.ClientID%>").children("option:selected").val();

edited Jan 04 '18 at 09:44

Pang

9,564
146
81
122

answered Feb 21 '17 at 20:19

user3166722

89
8

score 3 · Answer 7 · edited Jan 17 '14 at 13:35

3

var sal = $('.selectSal option:selected').eq(0).val();

selectSal is a class.

edited Jan 17 '14 at 13:35

falsetru

357,413
63
732
636

answered Jan 17 '14 at 13:17

Akanksha Singh

31
2

score 0 · Answer 8 · edited Jan 04 '18 at 13:30

0

$('.leave_response').on('change', function() {
    var responseId = $(this).val();
    console.log(responseId);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<td>
    <select class="leave_response" name="leave">
        <option>1</option>
        <option>2</option>
        <option>3</option>
        <option>4</option>
    </select>
</td>

edited Jan 04 '18 at 13:30

Aniket Sahrawat

12,410
3
41
67

answered Jan 04 '18 at 09:26

Yasas Malinga

29
1
4

score 0 · Answer 9 · answered Jun 22 '19 at 07:18

0

Pass the id and hold into a variable and pass the variable where ever you want.

var temp = $('select[name=ID Name]').val();

answered Jun 22 '19 at 07:18

Abhijit Patra

67
4

$('select[name=ID Name] option:selected').val(); This One Also Work – Abhijit Patra Jun 22 '19 at 07:20

Hesam Moosapour · Answer 10 · 2021-02-25T09:35:41.407

0

You can have text value of #Crd in its variable .

$(document).on('click', '#Crd', function () {
     var Crd = $( "#Crd option:selected" ).text();
});

edited Feb 25 '21 at 09:35

answered Feb 25 '21 at 08:59

Hesam Moosapour

510
5
12

score 0 · Answer 11 · answered Jan 23 '12 at 21:12

As has been pointed out ... in a select box, the .val() attribute will give you the value of the selected option. If the selected option does not have a value attribute it will default to the display value of the option (which is what the examples on the jQuery documentation of .val show.

you want to use .text() of the selected option:

$('#Crd option:selected').text()

Get the value of a dropdown in jQuery

11 Answers11

Linked

Related