How to get the the value of a select option

Question

How can I get the value of a select option?

<select id="geo_level_one">
  <option class="" value=""></option>
  <option label="AAA" value="0">AAA</option>
  <option label="BBB" value="1">BBB</option>
  <option label="CCC" value="2">CCC</option>
</select>

The value of the label BBB is 1. How can I use jQuery to return this value?

Not so complicated to google: http://learn.jquery.com/using-jquery-core/faq/how-do-i-get-the-text-value-of-a-selected-option/ — Troyer, Jan 03 '17 at 15:47
Do you mean that when the `BBB` option is selected you want to get the value of `1`? Or that you want to get the value from the element with the `BBB` text? — Rory McCrossan, Jan 03 '17 at 15:47
Also note that inventing your own attributes (`label` in this case) means that your HTML is invalid. If you want to store custom meta data with an element, use a ` data-*` attribute — Rory McCrossan, Jan 03 '17 at 15:48
Hi Rory McCrossan! 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. Thanks — André, Jan 03 '17 at 15:51
Possible duplicate of [jQuery get selected option value (not the text, but the attribute 'value')](http://stackoverflow.com/questions/13089944/jquery-get-selected-option-value-not-the-text-but-the-attribute-value) — user286089, Jan 03 '17 at 15:59

Jonathan Bowman · Answer 1 · 2017-01-03T15:56:47.880

3

The val() method will return what you're looking for! So, $("#geo_level_one").val();

You can change the dropdown here and look at the console to see it in action. I updated it to show getting the label without using invalid attributes - good catch, Rory McCrossan!

$("#geo_level_one").change(function() {
  console.log($(this).find("option:selected").text());
  console.log($(this).val());
});

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

edited Jan 03 '17 at 15:56

answered Jan 03 '17 at 15:49

Jonathan Bowman

1,606
1
12
17

Upvote simply for giving the `change()` event handler - which is the most crucial part really. – Rory McCrossan Jan 03 '17 at 15:50
@RoryMcCrossan Where is he saying when the select changes? He only wants to know the value of the `select`, read the question. – Troyer Jan 03 '17 at 15:53
Hi, I do not need to use ".change". I only want to query the values of the options. 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. – André Jan 03 '17 at 15:54

score 2 · Accepted Answer · answered Jan 03 '17 at 15:58

2

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>

answered Jan 03 '17 at 15:58

Rory McCrossan

331,213
40
305
339

Hi Rory McCrossan, the website is not in my control. I cannot change from "label" to "data-label". Any other alternatives to achieve this? – André Jan 03 '17 at 16:01
In which case use `option[label="' + ...` although you may have issues in older versions of IE. – Rory McCrossan Jan 03 '17 at 16:02
No problem, glad to help. – Rory McCrossan Jan 03 '17 at 16:03
Could you use the `:contains` selector here? – Jonathan Bowman Jan 03 '17 at 16:03
@JonathanBowman no, as that searches the innerText of the element – Rory McCrossan Jan 03 '17 at 16:04
Would the inner text be the same as the `label` attribute, though? – Jonathan Bowman Jan 03 '17 at 16:04
Very true for the OPs example, so in that case yes. Although his question was specifically about using the `label` attribute. – Rory McCrossan Jan 03 '17 at 16:04
Ah, gotcha - yeah using `:contains` on the option elements would work as long as the label attribute and text were the same, which isn't a given. – Jonathan Bowman Jan 03 '17 at 16:06

score 1 · Answer 3 · answered Jan 03 '17 at 15:48

1

Easy as:

$( "#geo_level_one" ).val();

Will return the current selected value.

Documentation: http://learn.jquery.com/using-jquery-core/faq/how-do-i-get-the-text-value-of-a-selected-option/

answered Jan 03 '17 at 15:48

Troyer

6,765
3
34
62

score 0 · Answer 4 · answered Jan 03 '17 at 15:48

0

You can do so:

var value = $('#geo_level_one').val();

answered Jan 03 '17 at 15:48

enzo

419
3
7
16

Usually it is a good idea to explain the code you post. This allows newer developers to understand how the code works and what it does. – Caleb Kleveter Jan 03 '17 at 16:35

How to get the the value of a select option

4 Answers4