Get the "value" attribute of an option in a <select> with Javascript or Jquery

Question

I am trying to get the "value" attribute in an tag (inside a tag.

My current code:

JavaScript:

var TheId = $('.nameofselect option:selected').val();

HTML:

<option value="123">Text value</option>

But this is returning the "Text value" of the option, not the actual value (i.e. 123) - which is what I need.

Thanks in advance

hat should work, although you don't need option:selected. Just $('.classofselect').val(). — Barmar
– Barmar, Commented Jul 3, 2014 at 5:52
I can't reproduce the problem: jsfiddle.net/barmar/4ApJy/1 Can you make a fiddle that demonstrates the problem? — Barmar
– Barmar, Commented Jul 3, 2014 at 5:55
Do you have class="nameofselect" in the <select> element? — Barmar
– Barmar, Commented Jul 3, 2014 at 5:56
@Barmar If it don't have that class then how it would have returned Text value... Quite confusing.. — Rajaprabhu Aravindasamy
– Rajaprabhu Aravindasamy, Commented Jul 3, 2014 at 5:57
I don't know. He must have done something wrong, and he didn't copy it to the question. — Barmar
– Barmar, Commented Jul 3, 2014 at 5:58

Sridhar R · Accepted Answer · 2014-07-03 06:03:35Z

1

Use .attr() selector

Try this

$('.nameofselect option:selected').attr('value'); // Return 123

$('.nameofselect').val() // Return 123

Example HTML

<select class="nameofselect">
    <option value="">select</option>
    <option value="123">Text value</option>
</select>

Script

$('.nameofselect').on('change',function(){
   alert( $(this).find('option:selected').val())
   alert( $(this).find('option:selected').attr('value'))
});

DEMO

edited Jul 3, 2014 at 6:03

answered Jul 3, 2014 at 5:51

Sridhar R

20.4k7 gold badges41 silver badges35 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Jordan S Over a year ago

When I try the $('.nameofselect').val(), it says undefined. When I change it to $('#idofselect').val() it displays the text value, not the ID that I want

RobG Over a year ago

Not my downvote, but $(this).find('option:selected').val() is just a crazily inefficient way to do this.value.

Sridhar R Over a year ago

RobG OP said in that way it shows undefined thats why we answered like that we too know this.value will reurn

RobG Over a year ago

The point is that all that jQuery does nothing useful except burn CPU cycles. Direct access to the DOM property removes jQuery as a factor (and is hugely faster and less to type).

Bhushan Kawadkar · Accepted Answer · 2014-07-03 05:55:08Z

0

You can use .val() to get selected value of select tag :

var TheId = $('.nameofselect').val();

And if you want to read value attribute of option then use below :

$('.nameofselect option').each(function(){
  alert($(this).val());
});

answered Jul 3, 2014 at 5:55

Bhushan Kawadkar

28.6k5 gold badges39 silver badges61 bronze badges

2 Comments

RobG Over a year ago

The jQuery val method does not necessarily return the value of the value attribute. It returns the attribute if present, or the text content of the option if there is no value attribute. If you want the actual value of an option's value attribute, use option.getAttribute('value'), or the jQuery attr method (in versions after 1.6).

hitautodestruct Over a year ago

@BhushanKawadkar You don't need to use .each() jQuery will iterate the result set without it.

Collectives™ on Stack Overflow

Get the "value" attribute of an option in a <select> with Javascript or Jquery

2 Answers 2

4 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related