How do you get the value of a name (text) in javascript?

Question

I have

which selects a box that looks like this (where you can select between Medium, Large and XLarge):

And I just can't find out how you get the value of text. So as example, I like to know the value of text "XLarge" to select XLarge in the box above. How do you do this?

I have already managed to do it by knowing the value. Then XLarge would be selected with this:

document.getElementsByName("size")[0].value=48819;

How would you do it if you just wanted XLarge by not really knowing its value? I imagine something like this but it didn't work:

document.getElementsByName("size")[0].value=document.getElementById("XLarge").value;

I hope someone has an idea because I have read many topics already hoping to find something similar or maybe I just forget to add something..? :S

Please post code as text, not an image of it. It makes for hard work :) — traktor, Sep 12 '18 at 00:27

score 4 · Accepted Answer · answered Sep 11 '18 at 22:13

You'll have to iterate through each <option> tag and find the one whose textContent matches the text you want. Then, extract the found <option>'s value, and assign it to the value of the select tag:

const size = document.querySelector('#size');
const xLargeOption = Array.prototype.find.call(
  size.children,
  ({ textContent }) => textContent === 'XLarge'
);
size.value = xLargeOption.value;

<select name="size" id="size">
  <option value="123">Medium</option>
  <option value="456">Large</option>
  <option value="789">XLarge</option>
</select>

If you're using jQuery, you can use its :contains selector, which allows for more concise syntax:

$('#size').val(
  $('option:contains("XLarge")').val()
);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="size" id="size">
  <option value="123">Medium</option>
  <option value="456">Large</option>
  <option value="789">XLarge</option>
</select>

charlietfl · Answer 2 · 2018-09-11T22:33:06.037

1

You can iterate the options and set selected property on them based on option.text

const setVal=(optText)=>{
  const opts = document.querySelectorAll('#size option');
  for(let opt of opts){
     opt.selected = opt.text === optText;
  }
}

setVal('Large')

<select name="size" id="size">
  <option value="123">Medium</option>
  <option value="456">Large</option>
  <option value="789" selected>XLarge</option>
</select>

edited Sep 11 '18 at 22:33

answered Sep 11 '18 at 22:27

charlietfl

170,828
13
121
150

Note `for of` may need to be converted to alternate loop in legacy browsers – charlietfl Sep 11 '18 at 22:40

score 1 · Answer 3 · answered Sep 12 '18 at 00:51

For a select element that only permits selecting a single option, you can directly locate the selected option's display text as the text property of the selected HTMLOptionsElement.

"use strict";

function getOptionText(selectId) {
    let select = document.getElementById( selectId);
    let index = select.selectedIndex;
    return index < 0 ? "" : select.options[index].text;

}

// test

   document.getElementById("size")
   .addEventListener("change",
      function( event) {
          console.log( getOptionText("size"));
      }
      , false);

<select name="size" id="size">
  <option value = "48817">Medium</option>
  <option value = "48818">Large</option>
  <option value = "48819">XLarge</option>
</select>

Note that this may be useful for providing feedback to the customer, but using it in program business logic is not recommended - program data would depend on HTML page text content language and choice of terms: change "XLarge" to "XL" and it stops working.

How do you get the value of a name (text) in javascript?

3 Answers3