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 に答える
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

PLAIN 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 に答える