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

Posted 2023-03-11

【中文标题】如何获取Javascript选择框的选定文本

【英文标题】：How to get Javascript Select box's selected text

【发布时间】：2011-03-11 09:11:53

【问题描述】：

这东西很完美

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

但我想选择文本。我是这样尝试的

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

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

【参考方案1】：

this.options[this.selectedIndex].innerhtml

应该为您提供所选项目的“显示”文本。 this.value，就像你说的，只是提供了value 属性的值。

【讨论】：

我不喜欢它。虽然我确信它确实适用于当前的浏览器，但它是基于 DOM 元素的代码和旧式表单操作代码的奇怪混合。 options 返回Option 对象的列表，我不确定在任何地方都将其指定为与<option> 元素相同的东西。最好使用选定的Option 的历史悠久的text 属性，它可以保证工作。

蒂姆，Option 对象与HTMLOptionElement 对象相同。如果您反对使用options，您可以选择使用children 或childNodes（不记得具体是哪一个；我认为它们都有效）

我认为你误解了一点：我完全赞成使用options，但Option 对象早于HTMLOptionElement 对象并且我没有看到任何规范要求Option和HTMLOptionElement 必须是同一个东西，即使它们很可能在支持两者的大多数浏览器中。我的观点是，不混合这两种风格会更安全。所以，我更喜欢this.options[this.selectedIndex].text 或基于selectedIndex 的基于节点的东西，因为需要过滤掉IE 中的空白文本节点而变得复杂。

这是一个很好的观点。只是出于好奇，如果选项节点中有非文本节点，text 是否返回 innerHTML，或者只是所有文本节点的组合？

天哪，停止投票无能！奥德有正确的答案。研究 DOM 的概念有多难？ >__>

【参考方案2】：

为了获得所选项目的值，您可以执行以下操作：

this.options[this.selectedIndex].text

这里访问了select的不同options，SelectedIndex用来选择选中的那个，那么它的text就被访问了。

阅读有关 select DOM here 的更多信息。

【讨论】：

this.options[this.selectedIndex].value 和this.value 完全一样，对不起。

当我使用 this.options[this.SelectedIndex].text 错误控制台说 - 错误：this.options[this.SelectedIndex] is undefined

SHAKTI：那是因为它是 selectedIndex 而不是 SelectedIndex。

或者，只是为了好玩，this.selectedOptions[0].text（如果你有一个多选，则有明显的扩展名）。

【参考方案3】：

请试试这个代码：

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

【讨论】：

非常感谢！这将返回组合框中所选项目的值

.text() 实际返回的是选中的文本

【参考方案4】：

随便用

$('#SelectBoxId option:selected').text(); 获取列出的文本

$('#SelectBoxId').val(); 用于获取选定的索引值

【讨论】：

虽然这对 jQuery 非常有效，但 OP 仅将 javascript 列为原始标签。不过，+1 因为有很多人使用 jQuery。

【参考方案5】：

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

【参考方案6】：

如果要获取值，可以将此代码用于 id="selectBox" 的选择元素

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

如果要获取文本，可以使用此代码

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

【参考方案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 上工作

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

【讨论】：

正如目前所写，您的答案尚不清楚。请edit 添加其他详细信息，以帮助其他人了解这如何解决所提出的问题。你可以找到更多关于如何写好答案的信息in the help center。