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

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

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

参数：

• select：一个HTMLSelect元素
• optionName< /code>：作为字符串

说明：
在函数体的第一行，我们使用 Array.from()< 以 array 形式检索 options /代码>。 这允许我们使用 Array.prototype.findIndex () 返回与提供的名称匹配的第一个选项的索引（如果有），或者如果不匹配则返回 -1。

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

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

在普通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 5

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

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

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

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

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