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

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

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

var opts=document.getElementById（“名称”）.options；

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

对于（变量i=0；i

---

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

尝试此操作，它会在选择框中找到并选择相关选项

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

var searchtext=“max”；
对于（变量i=0；i

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

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

var list=document.getElementById（“名称”）.options；
对于普通js中的（var i=0；i）

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

var sel，opts，opt，x，txt；
txt='Max'；
sel=document.getElementById（'names'）；
opts=选择选项；
对于（x=0；x
var x=document.getElementById（“名称”）；
对于（var i=0；i这应该可以做到：

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

var options=document.getElementsByTagName（'select'）[0]。子项，
我
l=选项。长度，
指数
对于（i=0；i

请注意，该指数是以零为基础的，这意味着它比您预期的少一个。

您需要选择元素，遍历数组，找到文本值，然后返回索引


不要使用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;
}

函数索引匹配文本（元素，文本）{
对于（var i=0；我支持响应，但它必须是纯JavaScript——没有jQuery！我强烈建议学习如何使用纯JavaScript，并意识到什么会使jQuery不适合这样的东西。感谢响应，但它必须是纯JavaScript——没有jQuery！@Incognito更新了我的答案。这真的很糟糕吗“暗杀者”这是一个有效的描述吗？当然，这是一个非标准的东西，它将DOM视为可以随意更改的原始文本，它也不是规范的一部分。去看看在jsperf上它对自己的性能有多差。@不知道很好。我没有意识到它不是标准的一部分。这是因为OM有效，MISE引入innerHTML Wayyy back，任何使用它的人都会放弃他们对IE6:P的诽谤权。这是因为一旦HTML被浏览器作为内存中的对象读取，而不是每次对文档进行更改时解析为HTML的字符串。浏览器强制它工作是因为“向后兼容”这会给每个人带来更多的问题和较慢的体验。这是根据值而不是文本节点的值进行选择的。
function indexMatchingText(ele, text) {
    for (var i=0; i<ele.length;i++) {
        if (ele[i].childNodes[0].nodeValue === text){
            return i;
        }
    }
    return undefined;
}