4

我有一个选择菜单,我需要根据选项元素的文本值动态选择选项。例如,我的选择如下所示:

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

4

8 回答 8

4

试试这个,它应该找到然后在选择框中选择相关选项。

var searchtext = "max";
for (var i = 0; i < listbox.options.length; ++i) {
    if (listbox.options[i].text === searchtext) listbox.options[i].selected = true;
}
于 2011-09-20T18:39:47.830 回答
4

http://jsfiddle.net/x8f7g/1/

您想要选择元素、遍历数组、找到文本值并返回索引。

  • 不要使用 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;
}
于 2011-09-20T18:49:28.597 回答
3
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;
    }
}

演示。

于 2011-09-20T18:34:40.820 回答
1

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

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

JSFiddle:http: //jsfiddle.net/cuTxu/2

于 2011-09-20T18:39:52.893 回答
1

在普通的 js 中

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];
    }
}
于 2011-09-20T18:40:19.933 回答
0

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

于 2011-09-20T18:34:42.070 回答
0
var x = document.getElementById("names");
for(var i = 0; i<x.options.length; i++){
    if("Max" == x.options[i].text){
        doSomething();
        //maybe x.selectedIndex = i;
    }
}
于 2011-09-20T18:41:12.047 回答
0

这应该可以解决问题:

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

请注意,索引是从零开始的,这意味着它比您预期的少一。

于 2011-09-20T18:43:56.570 回答