通过其文本值从下拉列表中选择选项元素答案

【问题标题】：Selecting an option element from a dropdown by its text value通过其文本值从下拉列表中选择选项元素
【发布时间】：2016-07-30 23:49:05
【问题描述】：

给定一个 HTML 表单元素，例如：

<select id='mydropdown'>
  <option value='foo'>Spam</option>
  <option value='bar'>Eggs</option>
</select>

我知道我可以用

选择第一个选项

document.getElementById("mydropdown").value='foo'

但是，假设我有一个值为“Spam”的变量；我可以通过文本而不是值来选择下拉项吗？

【问题讨论】：

标签： javascript drop-down-menu

【解决方案1】：

var desiredValue = "eggs"
var el = document.getElementById("mydropdown");
for(var i=0; i<el.options.length; i++) {
  if ( el.options[i].text == desiredValue ) {
    el.selectedIndex = i;
    break;
  }
}

【讨论】：

for (var i = 0; i

【解决方案2】：

我会使用 selectedIndex 或循环通过文本选择选项，下面的代码不起作用。

document.getElementById("mydropdown").text = 'Eggs';

【讨论】：

我不想要当前选中值的文本；我想根据文本设置值。不过，遍历el.options 并寻找正确的.text 属性看起来很有希望。
是的，我认为这是你最好的选择

【解决方案3】：

如果你想通过它的内部文本而不是值来获得一个选项，你可以这样做：

function go(){
    var dropdown = document.getElementById('mydropdown');
    var textSelected = 'Spam';

    for(var i=0, max=dropdown.children.length; i<max; i++) {
        if(textSelected == dropdown.children[i].innerHTML){
            alert(textSelected);
            return;
        }
    }
}

【讨论】：

您使用儿童集合与 dropdown.options 和 dropdown.options[i].text 的任何原因？
没有具体原因，我就是这么写的。

【解决方案4】：

旧版 IE 不将 select 的选项作为子节点处理，但所有浏览器都实现了 select 的选项集合的 text 属性。

function selectbytext(sel, txt){
    if(typeof sel== 'string'){
        sel= document.getELementById(sel) || document.getELementsByName(sel)[0];
    }
    var opts= sel.options;
    for(var i= 0, L= opts.length; i<L; i++){
        if(opts[i].text== txt){
            sel.selectedIndex= i;
            break;
        }
    }
    return i;
}

【讨论】：