如何在javascript中获取选项值

Question

我有这个代码：

<SELECT onChange="chData(this,this.value)">
<OPTION VALUE="_MIPS-LRSYSCPU">MIPS
<OPTION VALUE="_XXCEC-LRSYSCPU">% CEC
<OPTION VALUE="_nIFL-LRSYSCPU">nIFL
</SELECT>

我需要使用javascript来获取HTML PAGE中选项值的所有值（不是文本）。 问题是，知道该值包含单词“-LRSYSCPU”，但我不知道前一部分（示例_MIPS）。 第二个问题是我在选择中没有ID，所以如何获取选项值？ 我见过人们使用这段代码：

var e = document.getElementById("elementId");
var value = e.options[e.selectedIndex].value;
var text = e.options[e.selectedIndex].text;

但我没有身份证，所以我不知道如何继续..

我需要使用以下三个值创建一个数组：_MIPS-LRSYSCPU，_XXCEC-LRSYSCPU和_nIFL-LRSYSCPU。 谢谢

Answer 1

如果您只在整个页面上使用单一选择，那么您可以使用 -

let selectTags = document.getElementsByTagName（'select'）;

然后它会返回你的HTMLCollection数组[select]。 现在，您可以使用selectTags [0]来获取您的选择，这是HTMLCollection类型的对象。 该对象包含childNodes 。 迭代子节点将为您提供所有选项和值。

Answer 2

要获取页面中包含子字符串“LRSYSCPU”的所有选项值，您可以使用以下代码：

 // Grab all the options in the page const options = document.querySelectorAll('option'); // `filter` out the options that have the "LRSYSCPU" substring // in their values const filtered = [...options].filter(({ value }) => value.includes('-LRSYSCPU')); // Iterate over those filtered options with `map` and return only // the values const values = filtered.map(({ value }) => value); console.log(values); 

 <select> <option value="temp">temp</option> <option value="_MIPS-LRSYSCPU">MIPS</option> <option value="_XXCEC-LRSYSCPU">% CEC</option> <option value="temp2">temp2</option> <option value="_nIFL-LRSYSCPU">nIFL</option> </select> 

文档

• querySelectorAll

• filter

• map

Answer 3

您可以使用document.querySelectorAll()查找以-LRSYSCPU结尾的所有选项。 然后，您可以循环遍历它们并测试它们是否已被选中。

let options = document.querySelector("option[value$=-LRSYSCPU]");
for (let i = 0; i < options.length; i++) {
    if (options[i].selected) {
        value = options[i].value;
        text = options[i].text;
        break;
    }
}

如果您使用jQuery，它有一个选择器扩展名:selected ，所以您可以在没有循环的情况下执行此操作：

var option = $("option[value$=-LRSYSCPU]:selected");
var value = option.val();
var text = option.text();