按其文本值从下拉列表中选择选项元素

Question

假设有一个HTML表单元素：

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

我知道我可以使用以下代码选择第一个选项：

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

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

- Wooble

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

- David Waters

---

对于 (var i = 0; i < ddlc.options.length; i++) {if (jQuery.trim(ddlc.options[i].text) == jQuery.trim(result)) { alert("已输入所需内容"); var insertedtimeid = i $("#ddlCategory").val(insertedtimeid).trigger('updated').trigger('change'); break; }} - clarifier

Answer 2

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

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

- SavoryBytes

---

我不想要当前选择值的文本；我想根据文本设置值。循环遍历 "el.options"，查找正确的 ".text" 属性看起来很有前途。 - Wooble

是的，我认为那是你最好的选择。 - SavoryBytes

Answer 3

如果您想通过选项的 innertext 而不是值来获取选项，可以这样做：

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

- Vismari

---

你为什么要使用 children 属性呢？而不是使用 dropdown.options 或者 dropdown.options[i].text 呢？ - SavoryBytes

没有特定的原因，我只是写了那个。 - Vismari

Answer 4

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

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

- kennebec