CODEWITHSUNDEEP
javascriptjqueryhtml-select
Jordan S
Jordan S

Reputation: 51

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

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

Upvotes: 1

Views: 170

Answers (2)

Sridhar R
Sridhar R

Reputation: 20418

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

Upvotes: 1

Bhushan Kawadkar
Bhushan Kawadkar

Reputation: 28513

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

Upvotes: 0

Related Questions