169

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?

14 Answers 14

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

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

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

var text = getSelectedText('test');
2
90

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

$("#selectId option:selected").html();
3
  • 32
    since he wants the text, probably better to use .text()
    – Muhd
    Commented Oct 28, 2011 at 22:38
  • 6
    Not to be confused with $("#selectId option[selected]"), which will select the option which has the "selected" attribute but might not be currently selected.
    – mowwwalker
    Commented Sep 13, 2014 at 2:33
  • seems more complicated.!
    – NDEthos
    Commented Dec 18, 2015 at 8:40
56
document.getElementById('test').options[document.getElementById('test').selectedIndex].text;
2
  • It worked for me also, after trying all other options.
    – mimi
    Commented May 1, 2018 at 15:06
  • this wordk perfect! Commented Mar 14, 2019 at 19:44
38

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.

1
  • +1, meanwhile this is the way to go. The Firefox ticket is fixed and I even bothered opening MS Edge to verify that they support it, too. Commented Jan 17, 2018 at 0:40
29
selectElement.options[selectElement.selectedIndex].text;

References:

1
  • Easy to understand than the answer @wormhit gave. +1 for simplifying Commented Jun 22, 2017 at 16:29
7

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

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

You can use selectedIndex to retrieve the current selected option:

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

this.options[this.selectedIndex].innerText

2

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);
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>
3
  • Add some explanation Commented Sep 2, 2016 at 19:47
  • .innerHTML gets all children and their attributes. Whilst it works when an element has no children, if you have an element with children it returns way more than is intended.
    – hipkiss
    Commented Sep 30, 2016 at 12:47
  • 1
    How many "children" do you expect to have in-between your <option>Children?</option> tags?
    – user6749930
    Commented Sep 30, 2016 at 16:52
1

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;

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>

For select elements with the multiple attribute, document.querySelectorAll can be used to obtain all selected options.

let selectedText = [...document.querySelectorAll('#selectId option:checked')]
   .map(o => o.text);

document.querySelector('button').addEventListener('click', function(e) {
  let selectedText = [...document.querySelectorAll('#selectId option:checked')]
                      .map(o => o.text);
  console.log(selectedText);
});
<select id="selectId" multiple>
  <option>a</option>
  <option>b</option>
  <option>c</option>
</select>
<button>
Get selected text
</button>

0

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

// Using @Sean-bright's "elt" variable

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

Easy, simple way:

const select = document.getElementById('selectID');
const selectedOption = [...select.options].find(option => option.selected).text;
2
  • 1
    While this code snippet may solve the problem, it doesn't explain why or how it answers the question. Please include an explanation for your code, as that really helps to improve the quality of your post. Remember that you are answering the question for readers in the future, and those people might not know the reasons for your code suggestion. Commented Sep 10, 2018 at 14:33
  • 1
    I don't see how this is easy or simple. Why would you use find() when you already know the index of the selected item? Also, if there is no selected item (<select multiple>), this will generate an error. Commented Mar 1, 2019 at 23:21
0

It is pretty simple. In javascript anything with an ID doesn't need document.queryselector or $('#test') you can just use test. Then you simply loop over the selectedOptions which is apart of javascript and you can add it to a new array and use that data how ever you want.

let selectedItems = [];
for ( var i = 0; i < test.selectedOptions.length; i++) {
    selectedItems.push(test.selectedOptions[i].text);
}

Also

// if you want values
selectedItems.push(test.selectedOptions[i].value);

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.