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

selectElement.options[selectElement.selectedIndex].text;

参考文献：

选项集合，selectedIndex属性：HTML DOM Select Object
文字属性：HTML DOM Option Object
这个问题的答案正是如此：Option text Property

Answer 5

在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 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

Answer 8

this.options [this.selectedIndex] .innerText

Answer 9

如果你发现这个帖子并想知道如何通过事件获取所选的选项文本，请参阅示例代码：

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

Answer 10

使用选择列表对象来标识自己选择的选项索引。从那里 - 抓住该索引的内部HTML。现在你有了该选项的文本字符串。

<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>

Answer 11

:checked 选择器可与 document.querySelector 一起使用以检索所选选项。

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>

对于带有 multiple 属性的 select 元素，可以使用 document.querySelectorAll 获取所有选中的选项。

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>

Answer 12

与没有jQuery的@artur类似，使用简单的javascript：

//使用@Sean-bright的“elt”变量

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

Answer 13

简单易行的方法：

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

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

13 个答案: