Question

说我有一个这样的下拉列表：

<select id="MyDropDown">
    <option value="0">Google</option>
    <option value="1">Bing</option>
    <option value="2">Yahoo</option>
</select>

我希望根据选项文本设置所选值，而不是使用javascript设置值。我该怎么做呢？例如，使用c＃我可以执行类似下面示例的操作，并选择“Google”选项。

ListItem mt = MyDropDown.Items.FindByText("Google");
if (mt != null)
{
   mt.Selected = true;
}

提前感谢您的帮助！

Answer 1

var textToFind = 'Google';

var dd = document.getElementById('MyDropDown');
for (var i = 0; i < dd.options.length; i++) {
    if (dd.options[i].text === textToFind) {
        dd.selectedIndex = i;
        break;
    }
}

Answer 2

现代替代方案：

const textToFind = 'Google';
const dd = document.getElementById ('MyDropDown');
dd.selectedIndex = [...dd.options].findIndex (option => option.text === textToFind);

Answer 3

您可以遍历select_obj.options。每个选项对象中都有一个#text方法，您可以使用它来比较您想要的并设置select_obj的selectedIndex。

Answer 4

这适用于最新的 Chrome、FireFox 和 Edge，但不适用于 IE11：

document.evaluate('//option[text()="Yahoo"]', document).iterateNext().selected = 'selected';

如果你想忽略标题周围的空格：

document.evaluate('//option[normalize-space(text())="Yahoo"]', document).iterateNext().selected = 'selected'

JavaScript：根据选项文本设置下拉列表选定项

4 个答案: