如何使用纯Javascript通过匹配文本来获取下拉菜单中选项的索引？

Question

我有一个下拉菜单，需要根据选项元素的文本值动态选择选项。例如，我的选择看起来像这样：

<select id="names">
    <option value="">Please Select</option>
    <option value="1">John</option>
    <option value="2">Steve</option>
    <option value="3">Max</option>
</select>

如果我有字符串“Max”，如何获取选项的索引为4，以便可以使用JavaScript动态地将其设置为selectedIndex？无jQuery。

- Zoolander

Answer 1

试试这个，它应该能找到并选择选择框中相关的选项。

var searchtext = "max";
for (var i = 0; i < listbox.options.length; ++i) {
    if (listbox.options[i].text === searchtext) listbox.options[i].selected = true;
}

- ipr101

Answer 2

http://jsfiddle.net/x8f7g/1/

您需要选择元素，遍历数组，查找文本值并返回索引。

• 不要使用innerHTML，它很慢，容易出错，而且不符合标准
• 不要使用innerText，原因类似但不太严重
• 使用函数，这样您可以再次执行它
• 选择子文本节点，并检索nodeValue，这是跨浏览器友好的

---

示例：

function indexMatchingText(ele, text) {
    for (var i=0; i<ele.length;i++) {
        if (ele[i].childNodes[0].nodeValue === text){
            return i;
        }
    }
    return undefined;
}

- Incognito

Answer 3

您可以使用这个简短的函数来实现这一点：

function findIndexfromOptionName( select, optionName ) {
    let options = Array.from( select.options );
    return options.findIndex( (opt) => opt.label == optionName );
}

参数:

• select: 一个 HTMLSelect 元素
• optionName: 作为一个 string

说明:
在函数体的第一行，我们使用 Array.from() 将 <select> 标签中的 选项 作为一个 array 获取出来。 这使我们能够使用 Array.prototype.findIndex() 来返回第一个与提供的名称匹配的选项的索引，如果有匹配则返回该索引，否则返回-1。

想要一些使用它的理由吗？
它的实现很简短，语义非常清晰。而且是纯JS。

- Darkosphere

---

你的实现看起来很好（优雅，甚至可以链接调用以使其成为一行代码），但这是一个12年前的问题，已经有9个现有答案了。这真的添加了什么新内容吗？ - Jared Smith

虽然这是一个12年前的问题，但它是谷歌搜索引擎上第一个显示出来的，所以我决定发布一个更新的答案。编辑在这里使用的搜索字符串是：_get the index of an <option> inside a <select> from its name js_。 - Darkosphere

好的，+1。只是提醒一下，人们经常在旧问题上发布抄袭（直接复制粘贴现有答案）、错误答案和明显的垃圾信息，尤其是那些在网站上还没有获得很高声望值的用户（无意冒犯）。当浏览动态时，这总会引起一些警惕。我不想阻止你在必要时这样做，但人们可能会对此产生质疑（就像我在这里所做的一样）。 - Jared Smith

@JaredSmith，这是唯一一个未显式遍历选项的答案，我尝试了它，因为我觉得它最优雅。我强烈鼓励Darkosphere尝试改进旧的答案。 - Lante Dellarovere

@Lante Dellarovere 很高兴听到答案有所帮助。毕竟这就是我们通常发布它们的原因。 :p - Darkosphere

Answer 4

var opts = document.getElementById("names").options;
for(var i = 0; i < opts.length; i++) {
    if(opts[i].innerText == "Max") {
        alert("found it at index " + i + " or number " + (i + 1));
        break;
    }
}

Demo.

- karim79

---

谢谢回复，但必须使用纯JavaScript——不能用jQuery！ - Zoolander

https://developer.mozilla.org/en/Using_Web_Standards_in_your_Web_Pages/Using_the_W3C_DOM#Changing_an_Element's_Text_Using_the_DOM - Incognito

Answer 5

选项属性存储选择菜单中的选项 - 迭代它并比较内容。

var list = document.getElementById("names").options;

for(var i = 0; i<list.length; i++){
    if(list[i].text== "Max") { //Compare
        list[i].selected = true; //Select the option.
    }
}

JSFiddle: http://jsfiddle.net/cuTxu/2

JSFiddle：{{link1：http://jsfiddle.net/cuTxu/2}}

- Dennis

---

@隐身更新了我的回答。 “暗杀”是一个有效的描述，真的那么糟糕吗？ - Dennis

毫无疑问，这是一种非标准的方法，将DOM视为原始文本对象模型，可以随意更改，而且它也不是规范的一部分。你可以在jsperf上亲自查看它的性能有多差。 - Incognito

@Incognito 很好知道。我之前没有意识到它不是标准的一部分。 - Dennis

这是因为DOM的工作方式，MISE在很久以前引入了innerHTML，任何使用它的人都放弃了对IE6的抱怨权:P。这是因为一旦HTML被浏览器读取为内存中的对象，而不是每次对文档进行更改时解析为html的字符串。浏览器强制其工作是因为“向后兼容性”，这会导致更多问题和更慢的体验。 - Incognito

Answer 6

使用纯JS

var sel, opts, opt, x, txt;
txt='Max';
sel=document.getElementById('names');
opts=sel.options;
for (x=0;x<opts.lenght;x++){
    if (opts[x].text === txt){
        opt=opts[x];
    }
}

- Einacio

Answer 7

[编辑 - 扩展以包括非jQuery方法]

我强烈建议使用jQuery，因为解决方案只需要一行代码：

jQuery('#names option:contains("Max")').val()

不过，这里还是提供了一个纯JavaScript实现：

function findOption( select, matchMe ) {

  var

    // list of child options
    options = select.getElementsByTagName('option'),

    // iteration vars
    i = options.length,
    text,
    option;

  while (i--) {

    option = options[i];
    text = option.textContent || option.innerText || '';

    // (optional) add additional processing to text, such as trimming whitespace
    text = text.replace(/^\s+|\s+$/g);

    if (text === matchMe) {
      return option.getAttribute('value');
    }

  }

  return null;

}

使用示例：

alert(
  findOption(
    document.getElementsByTagName('select')[0],
    "Max"
  )
);

警告 3

- jimbo

---

谢谢回复，但必须使用纯JavaScript——不能用jQuery！ - Zoolander

我强烈建议学习如何使用纯JavaScript，并意识到在类似情况下使用jQuery会有什么不可取之处。 - Incognito

Answer 8

var x = document.getElementById("names");
for(var i = 0; i<x.options.length; i++){
    if("Max" == x.options[i].text){
        doSomething();
        //maybe x.selectedIndex = i;
    }
}

- Brian Colvin

---

这是按值选择，而不是文本节点的值。 - Incognito

Answer 9

这应该能解决问题：

var options = document.getElementsByTagName('select')[0].children,
    i,
    l = options.length,
    index;

for(i = 0; i < l; i++){
  if(options[i].firstChild.nodeValue === 'Max'){index = i};
}

请注意，索引是从零开始的，这意味着它比您预期的要少一个。

- topek