What's The Point of The <Option> "Label" Attribute Inside <Select>

What's the point of the <option> label attribute inside <select>?

In that example, the long text will be sent to the server when the form is submitted.

Given the existence of the value attribute, it is redundant.

Purpose of <option label=...>

In practice, it is meant for use inside a datalist element. The idea is that when browsers that do not support this element encounter it, they render its content, by normal principles, and if you want that fallback content to be empty, you need to use elements with empty content there. The label attribute lets you specify a human-readable string for an option, and modern browsers still implement the datalist with option elements properly.

Consider the following example in HTML5 CR:

<label>
 Sex:
 <input name=sex list=sexes>
 <datalist id=sexes>
  <option value="Female">
  <option value="Male">
 </datalist>
</label>

It is implemented so that there is just the text box, but if you type “f” there, the modern browsers suggest “Female”. (There is differences in details here, but that’s not relevant to the question.) Here you don’t need the label attribute.

But if you wanted to have values like 2 and 1 (the ISO/IEC 5218 standard codes for sexes) in the submitted form data, instead of strings “Female” and “Male”, what would you do? Inside a select element you could use <option value=2>Female</option>, but inside a datalist, that would result in the string “Female” being displayed by old browsers, and that would look odd.

Using the label attribute, you can write the datalist element as follows:

 <datalist id=sexes>
  <option value="2" label="Female">
  <option value="1" label="Male">
 </datalist>

This is meant to use human-readable words in the user interface and to submit the coded value 2 or 1 as part of form data. In practice, it does not work quite that well. The browser also has to show the coded value, since that’s what will appear in the textbox when the user selects a suggestion made by a browser. Different browsers have solved this in different ways, all with some drawbacks. E.g., on IE, focusing on the text box opens a menu with the alternatives “Female” and “Male”, which is fine, but then, if you click on “Female”, the menu closes and the character “2” appears in the box. It is difficult to say how browsers should deal with this. Anyway, this is where the label attribute is meant to be used.

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

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

How to get the the value of a select option

Firstly note that label is not a valid attribute for an option element. To store custom metadata in an element, use a data-* attribute, eg data-label.

If I query for the label "AAA" I should get 0, if I query for the label "BBB" I should get 1, if I query for the label "CCC" I should get 2

Given this statement, you can use the attribute selector to find the required option and the val() to get its value. Try this:

var query = 'BBB';var val = $('#geo_level_one option[data-label="' + query + '"]').val();
console.log(val);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><select id="geo_level_one">  <option class="" value=""></option>  <option data-label="AAA" value="0">AAA</option>  <option data-label="BBB" value="1">BBB</option>  <option data-label="CCC" value="2">CCC</option></select>

---

Related Topics