Retrieving the text of the selected in element

Question 1

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?

Question 2

function getSelectedText(elementId) {
    var elt = document.getElementById(elementId);

    if (elt.selectedIndex == -1)
        return null;

    return elt.options[elt.selectedIndex].text;
}

var text = getSelectedText('test');

Question 3

If you use jQuery then you can write the following code:

$("#selectId option:selected").html();

Question 4

document.getElementById('test').options[document.getElementById('test').selectedIndex].text;

Question 5

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.

Question 6

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

Question 7

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

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

Question 8

You can use selectedIndex to retrieve the current selected option:

el = document.getElementById('elemId')
selectedText = el.options[el.selectedIndex].text

Question 9

this.options[this.selectedIndex].innerText

Question 10

If you found this thread and wanted to know how to get the selected option text via event here is sample code:

alert(event.target.options[event.target.selectedIndex].text);

Question 11

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>

Question 12

Similar to @artur just without jQuery, with plain javascript:

// Using @Sean-bright’s “elt” variable

var selection=elt.options[elt.selectedIndex].innerHTML;

Question 13

Easy, simple way:

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

Question 14

The :checked selector can be used with document.querySelector to retrieve the selected option.

let selectedText = document.querySelector('#selectId option:checked').text;
// or
let selectedText = document.querySelector('#selectId').querySelector('option:checked').text;

Demo:

document.querySelector('button').addEventListener('click', function(e) {
  console.log(document.querySelector('#selectId option:checked').text);
});

<select id="selectId">
  <option>a</option>
  <option>b</option>
  <option>c</option>
</select>
<button>
Get selected text
</button>

Leave a Comment Cancel reply