在<select>元素中检索所选<option>的文本

Question

在下面的:

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

如何使用JavaScript获取所选选项的文本(即"Test One"或"Test Two")

document.getElementsById('test').selectedValue 返回1或2,什么属性返回所选选项的文本？

Answer 1

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

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

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

var text = getSelectedText('test');

Answer 2

如果您使用jQuery,那么您可以编写以下代码:

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

Answer 3

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

Answer 4

在HTML5下,您可以这样做:

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

MDN的文档位于https://developer.mozilla.org/en-US/docs/Web/API/HTMLSelectElement/selectedOptions表示完全跨浏览器支持(截至2017年12月),包括Chrome,Firefox,Edge和移动浏览器,但不包括Internet Explorer.

Answer 5

selectElement.options[selectElement.selectedIndex].text;

参考文献:

• options collection,selectedIndex属性:HTML DOM选择对象
• text属性:HTML DOM选项对象
• 这个问题的答案就是:选项文本属性

Answer 6

该options物业包含所有<options>- 从那里你可以看到.text

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

Answer 7

您可以使用selectedIndex来检索当前选定的option：

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