jQuery get selected option value (not the text, but the attribute 'value')

Question

Okay, I have this code:

<select name="selector" id="selector">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
</select>

And I'd like to get the value of the option selected. Example: 'Option 2' is selected, and the value of it is '2'. The '2' is the value I need to get and not 'Option 2'.

score 305 · Accepted Answer · edited Jan 06 '21 at 16:20

305

04/2020: Corrected old answer

Use :selected pseudo selector on the selected options and then use the .val function to get the value of the option.

$('select[name=selector] option').filter(':selected').val()

Side note: Using filter is better then using :selected selector directly in the first query.

If inside a change handler, you could use simply this.value to get the selected option value. See demo for more options.

//ways to retrieve selected option and text outside handler
console.log('Selected option value ' + $('select option').filter(':selected').val()); 
console.log('Selected option value ' + $('select option').filter(':selected').text());

$('select').on('change', function () {
  //ways to retrieve selected option and text outside handler
  console.log('Changed option value ' + this.value);
  console.log('Changed option text ' + $(this).find('option').filter(':selected').text());
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<select>
  <option value="1" selected>1 - Text</option>
  <option value="2">2 - Text</option>
  <option value="3">3 - Text</option>
  <option value="4">4 - Text</option>
</select>

Old answer:

Edit: As many pointed out, this does not returns the selected option value.

~~Use .val to get the value of the selected option. See below,

$('select[name=selector]').val()~~

edited Jan 06 '21 at 16:20

AGuyCalledGerald

7,452
16
69
113

answered Oct 26 '12 at 15:32

Selvakumar Arumugam

78,145
14
119
133

5

Do ur test: `$('select[name=selector]').change(function() { alert($(this).val()); });` – KingRider Oct 08 '15 at 14:06
4

Note that if the selected option has no `value` attribute specified, the label (i.e. ``) will be returned. Might not always be what you want. Of course, in most applications, value is specified. – Czechnology Apr 11 '17 at 21:04
1

Why is using `filter` better? Also why does `.val()` not work? It seems to work at least in Chrome. It's not clear from the comments. Thanks for your help! – Crashalot Jun 15 '21 at 08:40
for me .val() seems to work fine, any reason not to use it? – garek007 Jul 29 '21 at 21:15
This doesn't work, but if you use `.find` instead of `.filter` you might have success :wink: – b264 Oct 01 '21 at 05:19

score 133 · Answer 2 · edited May 03 '19 at 20:36

133

I just wanted to share my experience

For me,

$('#selectorId').val()

returned null.

I had to use

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

edited May 03 '19 at 20:36

Jean-François Fabre

131,796
23
122
195

answered Jul 16 '14 at 10:27

David Torres

1,717
1
16
19

1

Was that browser specific case? Did the newest version of chrome not allow it, or was it IE that didnt support it? – Theodor Solbjørg Mar 10 '15 at 17:50
1

It was in the newest version of Chrome. Maybe also in Firefox, but not sure. – David Torres Mar 11 '15 at 17:55
Not sure why `$('#selectorId option:selected').val()` didn't worked for me. Instead I used `$('select option:selected').val()` – Francisco Quintero Jun 09 '15 at 02:50
1

@Francisco The problem is that `$('select option:selected').val()` will take the value of the first selector in the HTML code. Whereas with `$('#selectorId option:selected').val()` you can have the value of the selector which id you specified. Double check for typos. Here is an example that shows what I just said: http://codepen.io/anon/pen/Nqgqyz – David Torres Jun 10 '15 at 08:25

score 25 · Answer 3 · answered Oct 26 '12 at 15:33

25

$('select').change(function() {
    console.log($(this).val())
});

jsFiddle example

.val() will get the value.

answered Oct 26 '12 at 15:33

j08691

197,815
30
248
265

Marcus · Answer 4 · 2013-10-02T17:33:51.137

10

You need to add an id to your select. Then:
$('#selectorID').val()

edited Oct 02 '13 at 17:33

answered Oct 26 '12 at 15:32

Marcus

5,296
3
30
53

i have the id added, just forgot to add it here. – n00b Oct 26 '12 at 15:34
1

From what I've read using an ID as a selector is the fastest method. – Marcus Oct 26 '12 at 15:35

score 7 · Answer 5 · edited Jun 28 '17 at 11:03

7

Try this:

$(document).ready(function(){
    var data= $('select').find('option:selected').val();
});

or

var data= $('select').find('option:selected').text();

edited Jun 28 '17 at 11:03

andreas

15,414
12
68
68

answered Jun 28 '17 at 10:50

Payal Mittal

121
2
2

score 5 · Answer 6 · answered Oct 26 '12 at 15:39

5

you can use jquery as follows

SCRIPT

  $('#IDOfyourdropdown').change(function(){
    alert($(this).val());
  });

FIDDLE is here

answered Oct 26 '12 at 15:39

Usman

3,203
3
26
45

Geziel Carvalho · Answer 7 · 2016-06-22T22:43:09.220

For a select like this

<select class="btn btn-info pull-right" id="list-name" style="width: auto;">
   <option id="0">CHOOSE AN OPTION</option>
   <option id="127">John Doe</option>
   <option id="129" selected>Jane Doe</option>

... you can get the id this way:

$('#list-name option:selected').attr('id');

Or you can use value instead, and get it the easy way...

<select class="btn btn-info pull-right" id="list-name" style="width: auto;">
   <option value="0">CHOOSE AN OPTION</option>
   <option value="127">John Doe</option>
   <option value="129" selected>Jane Doe</option>

like this:

$('#list-name').val();

score 2 · Answer 8 · answered Sep 03 '16 at 21:14

One of my options didn't have a value: <option>-----</option>. I was trying to use if (!$(this).val()) { .. } but I was getting strange results. Turns out if you don't have a value attribute on your <option> element, it returns the text inside of it instead of an empty string. If you don't want val() to return anything for your option, make sure to add value="".

score 1 · Answer 9 · answered Nov 24 '17 at 15:39

1

this code work very well for me: this return the value of selected option. $('#select_id').find('option:selected').val();

answered Nov 24 '17 at 15:39

Abolfazl Miadian

2,639
1
17
15

score 1 · Answer 10 · answered May 02 '18 at 10:28

1

 $(document ).ready(function() {
    $('select[name=selectorname]').change(function() { 
     alert($(this).val());});
 });

answered May 02 '18 at 10:28

Turan Zamanlı

3,628
1
14
20

While this code could solve the problem, it is best to add elaboration and explain how it works for people who might not understand this piece of code. – Papershine May 02 '18 at 11:34
@paper1111 this is simple functions. I can explain if this is needed. $('select[name = here is select box name]) .change() - function its mean that when we change select box option function will be work. $(this).val() - it return selected option value – Turan Zamanlı May 03 '18 at 10:20

score 1 · Answer 11 · answered Feb 07 '20 at 05:13

Source Link

Use jQuery val() to GET Selected Value and and text() to GET Option Text.

    <select id="myDropDown" class="form-control">
        <option value="0">Select Value 0</option>
        <option value="8">Option value 8</option>
        <option value="5">Option value 5</option>
        <option value="4">Option value 4</option>
    </select>

Change Event on Select Dropdown

        $("#myDropDown").change(function () {

            // Fetching Value
            console.log($(this).val());

            // Fetching Text
            console.log($(this).find('option:selected').text());

            alert('Value: '+$(this).val()+' | Text: '+$(this).find('option:selected').text());
        });

Button Click

        $("button").click(function () {

        // Fetching Value
            console.log($("#myDropDown").val());

    // Fetching Text
            console.log($('#myDropDown option:selected').text());

            alert('Value: '+$("#myDropDown").val()+' | Text: '+$('#myDropDown option:selected').text());
        });

score 0 · Answer 12 · edited Mar 16 '17 at 12:15

Look at the example:

    <select class="element select small" id="account_name" name="account_name"> 

        <option value="" selected="selected">Please Select</option>           
        <option value="paypal" >Paypal</option>
        <option value="webmoney" >Webmoney</option>

    </select>

 <script type="text/javascript">

        $(document).ready(function(){ 
             $('#account_name').change(function(){
               alert($(this).val());                                                          
             });
        });
 </script>

score 0 · Answer 13 · edited Aug 22 '17 at 21:22

0

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

OR

$('select[name=selector]').val();

OR

$('.class_nam').val();

edited Aug 22 '17 at 21:22

Farhad Bagherlo

6,623
3
23
45

answered Aug 22 '17 at 19:57

Saddam Khan

21
3

1

@FarhadBagherlo "Keep typing" is **not** a useful edit comment! Please summarize your changes, so that readers of the edit history understand what you've done without inspecting every changed character. Thanks! – jpaugh Aug 22 '17 at 21:12

score 0 · Answer 14 · answered Nov 23 '20 at 08:44

0

It's working better. Try it.

let value = $("select#yourId option").filter(":selected").val();

answered Nov 23 '20 at 08:44

Rashiqul Rony

49
1
6

jQuery get selected option value (not the text, but the attribute 'value')

14 Answers14

Linked