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

79

这东西工作完美

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

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

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

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

javascript select

— 阿贾希德
source

126

this.options[this.selectedIndex].innerHTML

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

— 德兰·阿扎巴尼（Delan Azabani）
source

6

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

— Tim Down'7

蒂姆，Option对象与HTMLOptionElement对象相同。如果您反对使用options，则可以选择使用children或childNodes代替（记不清是哪一个；我认为它们都起作用）

— Delan Azabani 2010年

1

我想你误会咯：我完全赞成使用的options，但Option对象约会前的HTMLOptionElement对象，而且也没有说明我见过的强制要求Option和HTMLOptionElement必须是同样的事情，尽管他们很可能是同时支持大多数的浏览器。我的观点是，不要将两种样式混合使用会更安全。因此，我宁愿this.options[this.selectedIndex].text还是基于的基于节点的事物selectedIndex，由于需要在IE中过滤掉空白文本节点而使它变得复杂。

— Tim Down'7

这是非常好的一点。出于好奇，如果选项节点内有非文本节点，是否text返回innerHTML，或仅返回所有文本节点的组合？

— Delan Azabani

1

真是的人，停止无能为力！奥德有正确的答案。研究DOM的概念有多难？> __>

— 约翰

68

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

this.options[this.selectedIndex].text

在这里options访问不同的选择，并SelectedIndex使用来选择所选的内容，然后对其text进行访问。

在此处阅读有关选择DOM的更多信息。

— 奥德
source

1

this.options[this.selectedIndex].value与完全相同this.value，抱歉。

— Delan Azabani

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

— Aajahid 2010年

3

夏克蒂：那是因为selectedIndex不是SelectedIndex。

— Tim Down'7

2

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

— ruffin '16

37

请尝试以下代码：

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

— 安德烈·莫拉塔（Andre Morata）
source

那谢谢啦！这将返回组合框中所选项目的值

— saber tabatabaee yazdi

.text（）实际上返回选定的文本

— Windrider 20-03-03

33

只需使用

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

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

— 婚姻喜悦
source

2

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

— Sablefoste 2015年

1

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

— 米歇尔
source

0

如果要获取值，可以将此代码用于id为“ selectBox”的select元素

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

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

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

— 迈克尔·阿尔伯斯
source