Retrieving the text of the selected in &l

Question

In the following:

<select id="test">
    <option value="1">Test One</option>
    <option value="2">Test Two</option>
</select>

How can I get the text of the selected option (i.e. "Test One" or "Test Two") using JavaScript

document.getElementsById('test').selectedValue returns 1 or 2, what property returns the text of the selected option?

Answer 1

The options property contains all the <options> - from there you can look at .text

document.getElementById('test').options[0].text == 'Text One'

Answer 2

Use the select list object, to identify its own selected options index. From there - grab the inner HTML of that index. And now you have the text string of that option.

<select onchange="alert(this.options[this.selectedIndex].innerHTML);">
       <option value="">Select Actions</option>
       <option value="1">Print PDF</option>
       <option value="2">Send Message</option>
       <option value="3">Request Review</option>
       <option value="4">Other Possible Actions</option>
    </select>

Answer 3

Easy, simple way:

const select = document.getElementById('selectID');
const selectedOption = [...select.options].find(option => option.selected).text;

Answer 4

selectElement.options[selectElement.selectedIndex].text;

References:

• options collection, selectedIndex property: HTML DOM Select Object
• text property: HTML DOM Option Object
• exactly the answer of this question: Option text Property

Answer 5

this.options[this.selectedIndex].innerText

Answer 6

Under HTML5 you are be able to do this:

document.getElementById('test').selectedOptions[0].text

MDN's documentation at https://developer.mozilla.org/en-US/docs/Web/API/HTMLSelectElement/selectedOptions indicates full cross-browser support (as of at least December 2017), including Chrome, Firefox, Edge and mobile browsers, but excluding Internet Explorer.