使用javascript按值获取选择选项答案

【问题标题】：Get select option by value using javascript使用javascript按值获取选择选项
【发布时间】：2014-11-09 19:50:45
【问题描述】：

我有选择菜单：

<div class="selector">
<select>
<option value="valueA">Value A</option>
<option value="valueB">Value B</option>
<option value="valueC">Value C</option>
</select>
</div>

我需要 Javascript（没有 jquery！）按值获取选项并更改它的文本（innerHtml）

例如，当我运行函数时，我需要从“选择器”类中获取值为“valueB”的选项，并将其文本更改为“任意值”。

【问题讨论】：

标签： javascript option

【解决方案1】：

我建议：

document.querySelector('div.selector option[value=valueB]').text = 'Value whatever';

进一步，回答 cmets 提出的问题：

我只需要获取与另一个 <option> 具有相同值的第二个 <option> 元素，并将文本仅更改为第二个 <option>

使用value="valueB" 获取所有<option> 元素：

document.querySelectorAll('div.selector option[value=valueB]')[1].text = 'Value whatever';

不同之处在于document.querySelector() 仅返回与提供的 CSS 选择器匹配的第一个（如果 any）作为节点（而不是NodeList），因此可以直接使用属性； document.querySelectorAll() 在NodeList 中返回所有与提供的选择器匹配的元素；所以我们必须使用（从零开始的）索引 ([1]) 来检索特定节点，并获取/设置其属性。

【讨论】：

你的意思是'option[value="valueA"]'？你应该使用innerHTML，而不是text，因为这就是我们所要求的。
您对option 的看法是完全正确的，是的；但不是关于innerHTML。
你是对的文本（不是innerHtml）。如果有两个，你能告诉我如何获得第二个相同的值吗？ @大卫托马斯
你想要获得所有具有该值的<option> 元素！并将文本更改为相同的字符串？
不，我只需要获取与另一个

【解决方案2】：

document.querySelector('[value=valueB]').innerHtml="innerHtml"

文本document.querySelector('[value=valueB]').text="text"

【讨论】：