如何通过将文本与纯 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，原因类似但没有那么严重
• 请使用一个函数，这样您就可以重新做一遍。
• 选择子文本节点，并检索nodeValue，这是跨浏览器友好的

例子：

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