javascript - 如何通过将文本与纯 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。

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

Answer 2

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

您想要选择元素、遍历数组、找到文本值并返回索引。

• 不要使用 InnerHTML，它很慢而且会中断并且不符合标准
• 不要使用innerText，类似的原因，但没有那么严重
• 一定要使用一个函数，这样你就可以重新做一遍。
• 选择子文本节点，并检索节点值，这是跨浏览器友好的

---

例子：

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

Answer 3

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

演示。

Answer 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

Answer 5

在普通的 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];
    }
}

Answer 6

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

Answer 7

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

Answer 8

这应该可以解决问题：

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

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