如何获取JavaScript选择框的选定文本

Question

这件事情完美地运作了。

<select name="selectbox" onchange="alert(this.value)">

但是我想选择文本。我尝试了这种方式。

<select name="selectbox" onchange="alert(this.text)">

它显示为未定义。 我发现如何使用DOM获取文本。但我想以这种方式完成，我的意思是只使用this.value。

- Aajahid

Answer 1

this.options[this.selectedIndex].innerHTML

你应该提供所选择项目的“显示”文本。像你说的那样，this.value仅提供value属性的值。

- Delan Azabani

---

我不喜欢它。虽然我确信它在现代浏览器上可以工作，但它是基于DOM元素的代码和旧式表单操作代码的奇怪混合物。 options 返回一个 Option 对象列表，我不确定它们是否被指定为与 <option> 元素相同的东西。最好使用经典的选定 Option 的 text 属性，这是保证可行的。 - Tim Down

Tim，Option 对象与 HTMLOptionElement 对象相同。如果您不喜欢使用 options，您可以选择使用 children 或 childNodes（我记不清哪一个了；我认为它们都可以）。 - Delan Azabani

我认为你有一点误解：我完全支持使用options，但是Option对象早于HTMLOptionElement对象，并且我没有看到任何规范要求Option和HTMLOptionElement必须是相同的东西，即使它们在大多数支持两者的浏览器中可能是相同的。我的观点是最好不要混合两种样式。所以，我更喜欢this.options[this.selectedIndex].text或基于selectedIndex的基于节点的东西，这在IE中需要过滤掉空格文本节点并且比较复杂。 - Tim Down

这是一个非常好的问题。只是出于好奇，如果您在选项节点内有非文本节点，text返回innerHTML还是所有文本节点组合起来？ - Delan Azabani

天啊，人们停止给无能力者点赞吧！Oded 给出了正确的答案。研究 DOM 的概念有多难？>__> - John

Answer 2

要获取所选项目的值，可以执行以下操作：

this.options[this.selectedIndex].text

这里访问了选择框的不同 选项，并使用SelectedIndex选择所选项，然后访问其text。

在此处阅读更多关于选择框DOM的信息这里。

- Oded

---

抱歉，this.options[this.selectedIndex].value 和 this.value 是完全相同的。 - Delan Azabani

当我使用this.options[this.SelectedIndex].text时，错误控制台显示 - 错误：this.options[this.SelectedIndex]未定义 - Aajahid

那是因为它是 selectedIndex 而不是 SelectedIndex。 - Tim Down

或者，只是为了好玩，this.selectedOptions[0].text（如果您有多选，则显然需要扩展）。 - ruffin

Answer 3

请尝试此代码：

$("#YourSelect>option:selected").html()

- Andre Morata

---

非常感谢！这将返回组合框中所选项目的值。 - saber tabatabaee yazdi

.text() 实际上返回所选文本。 - Windrider

Answer 4

获取下拉框中选项的文本，只需使用

$('#SelectBoxId option:selected').text();

获取选定索引值，只需使用

$('#SelectBoxId').val();

- Marvil Joy

---

虽然这对于jQuery来说完全没问题，但是原帖只列出了javascript作为一个原始标签。尽管如此，还是加1，因为很多人都在使用jQuery。 - Sablefoste

Answer 5

如果您想获取值，可以使用以下代码选择ID为“selectBox”的选择元素

let myValue = document.querySelector("#selectBox").value;

如果您想获取文本，您可以使用此代码。

var sel = document.getElementById("selectBox");
var text= sel.options[sel.selectedIndex].text;

- Michael Albers

Answer 6

我知道这里没有人要求jQuery的解决方案，但值得一提的是，使用jQuery你只需要请求：$('#selectorid').val()

- Michiel

Answer 7

问题不在于值，而在于文本。 想象一下你有这样的东西：

<select name="select">
<option value="1">0.5</option
<option value="2">0.7</option
</select>

而且你需要捕获文本。 对于我来说，我已经尝试使用HTML（PHP），然后

 this.options[this.selectedIndex].text 

(来自Delan Azabani)不起作用，但是

 this.options[selectedIndex].text

像这样在HTML上工作

<select ... onChange="upTVA(this.options[selectedIndex].text);">

仍然令人惊讶的是，对于一个选择器，this.text不起作用，而this.value起作用。

- Eric Dienot

---

目前你的回答不够清晰，请[编辑]以添加更多细节，帮助其他人理解它如何回答问题。你可以在帮助中心找到有关如何编写好答案的更多信息。 - Community