如何通过将文本与纯 Javascript 匹配来获取选择菜单中选项的索引？答案

【问题标题】：How to get the index of an option in a select menu by matching the text with plain Javascript?如何通过将文本与纯 Javascript 匹配来获取选择菜单中选项的索引？
【发布时间】：2011-11-21 08:15:16
【问题描述】：

我有一个选择菜单，我需要根据选项元素的文本值动态选择选项。例如，我的选择如下所示：

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

【问题讨论】：

标签： javascript indexing select-menu

【解决方案1】：

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;
}

【讨论】：

【解决方案2】：

[编辑 - 扩展为包括非 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

【讨论】：

感谢您的回复，但它必须是纯 JavaScript -- 没有 jQuery！
我强烈建议学习如何使用纯 JavaScript 并意识到什么会使 jQuery 不适合这样的事情。

【解决方案3】：

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;
    }
}

【讨论】：

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

【解决方案4】：

options 属性将选项存储在选择菜单中 - 对其进行迭代并比较内容。

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

【讨论】：

@Incognito 更新了我的答案。 “暗杀”是一个有效的描述真的那么糟糕吗？
当然，将 DOM 视为对象模型是可以随意更改的原始文本是非标准的事情，它也不是规范的一部分。去看看 jsperf 对你自己的性能有多糟糕。
@Incognito 很高兴知道。我没有意识到它不是标准的一部分。
这是因为 DOM 的工作原理，MISE 引入了 innerHTML wayyyy 回来，任何使用它的人都放弃了他们对 badmouth IE6 的权利：P。这是因为一旦您的浏览器将 HTML 读取为内存中的 objects，而不是每次对文档进行更改时都会解析为 html 的字符串。浏览器会因为“向后兼容性”而强制它工作，这会给每个人带来更多问题和更慢的体验。

【解决方案5】：

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.

【讨论】：

感谢您的回复，但它必须是纯 JavaScript -- 没有 jQuery！
developer.mozilla.org/en/Using_Web_Standards_in_your_Web_Pages/…

【解决方案6】：

这应该可以解决问题：

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};
}

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

【讨论】：

【解决方案7】：

在纯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];
    }
}

【讨论】：

【解决方案8】：

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

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

【讨论】：