Javascript get value from select option based on label

Question

Using either jQuery or pure JavaScript, how can I get the ID for a select option based on the label? So for example, given the following:

<select id="blah">
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
</select>

If I have the label "Two" but I need to know the value associated with it, how can I get that value from this select? I don't want to simply select it, I need to know what the value is.

Answer 1

If the only reference you have is really the actual text content, then you'll have to loop through the elements and check the content of each one. Shown here with jQuery just because it's less to type:

var result;
$("option").each(function() {
    if ($(this).text() == "Two") {
        result = $(this).attr("value");
        return false;
    });
});

Answer 2

Another option:

$('#blah').find('option:contains("Two")').val();

(Pun intended?)

Answer 3

Get all the options and then use find to get the one with specific text.

 const optionEls = Array.from(document.querySelectorAll("#blah option")); const hasText = text => el => el.textContent === text; const optionWithTwo = optionEls.find(hasText("Two")); console.log(optionWithTwo.value); 

 <select id=blah> <option value=1>One</option> <option value=2>Two</option> <option value=3>Three</option> </select>