CODEWITHSUNDEEP
jqueryhtml
umiwangu
umiwangu

Reputation: 23

How can I get the value of the label attribute in an option element?

I'm trying to get not just the value of the option element, but the value of the label attribute as well. Any ideas on how to do it? I'm currently using this (inline) to get the option's value:

$('select :selected').html();

My select would look something like this:

<select>
<option value="John Smith" label="JS">John Smith</option
</select>

Any ideas? I've been looking for the last half-hour or so and some solutions have come close, but I can't find anyone who is looking for the value of the label.

Here's one that I thought would answer my question, but I think they were after something slightly different. - How to get label of select option with jQuery?

Thanks in advance!

Upvotes: 2

Views: 9489

Answers (1)

Sushanth --
Sushanth --

Reputation: 55750

Try this

$('select option:selected').attr('label');

The .html() you are using just gives the Contents inside the option // John Smith

You need to access the label attribute instead..

Instead use the data-* attributes as the label attribute is not valid for option

<select>
  <option value="John Smith" data-label="JS">John Smith</option>
</select>

And from javascript get the data using:

$('select option:selected').attr('data-label');

or alternatively

$('select option:selected').data('label');

$('select option:selected').val();  // Get's the value..

CHECK DEMO

Upvotes: 2

Related Questions