Question

我有选择菜单：

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

例如，当我运行该函数时，我需要获得值为＆＃34; valueB＆＃34;的选项。来自班级＆＃34;选择器＆＃34;并将其文本更改为Value Whatever。

Answer 1

我建议：

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

此外，在回答评论中提出的问题时：

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

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

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

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

Answer 2

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

用于文字document.querySelector('[value=valueB]').text="text"

使用javascript按值获取选择选项

2 个答案: