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 (ie "Test One" or "Test Two") using JavaScript
document.getElementsById('test').selectedValue
returns 1 or 2, what property returns the text of the selected option?
function getSelectedText(elementId) {
var elt = document.getElementById(elementId);
if (elt.selectedIndex == -1)
return null;
return elt.options[elt.selectedIndex].text;
}
var text = getSelectedText('test');
如果您使用 jQuery,那么您可以编写以下代码:
$("#selectId option:selected").html();
document.getElementById('test').options[document.getElementById('test').selectedIndex].text;
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.
selectElement.options[selectElement.selectedIndex].text;
References:
options
属性包含所有<options>
- 从那里您可以查看.text
document.getElementById('test').options[0].text == 'Text One'
You can use selectedIndex
to retrieve the current selected option
:
el = document.getElementById('elemId')
selectedText = el.options[el.selectedIndex].text
this.options[this.selectedIndex].innerText
如果您找到了这个线程并想知道如何通过事件获取选定的选项文本,这里是示例代码:
alert(event.target.options[event.target.selectedIndex].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>
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>
Similar to @artur just without jQuery, with plain javascript:
// Using @Sean-bright's "elt" variable
var selection=elt.options[elt.selectedIndex].innerHTML;
Easy, simple way:
const select = document.getElementById('selectID');
const selectedOption = [...select.options].find(option => option.selected).text;
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);
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.