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?
This question is related to
javascript
html
dom
this.options[this.selectedIndex].innerText
The options
property contains all the <options>
- from there you can look at .text
document.getElementById('test').options[0].text == 'Text One'
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.
You can use selectedIndex
to retrieve the current selected option
:
el = document.getElementById('elemId')
selectedText = el.options[el.selectedIndex].text
document.getElementById('test').options[document.getElementById('test').selectedIndex].text;
selectElement.options[selectElement.selectedIndex].text;
References:
Easy, simple way:
const select = document.getElementById('selectID');
const selectedOption = [...select.options].find(option => option.selected).text;
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>
Similar to @artur just without jQuery, with plain javascript:
// Using @Sean-bright's "elt" variable
var selection=elt.options[elt.selectedIndex].innerHTML;
If you use jQuery then you can write the following code:
$("#selectId option:selected").html();
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);
Source: Stackoverflow.com