web-dev-qa-db-ja.com

ドロップダウンからテキスト値でオプション要素を選択する

次のようなHTMLフォーム要素を指定します。

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

私は最初のオプションを選択できることを知っています

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

ただし、値が「Spam」の変数があるとします。ドロップダウンアイテムを値ではなくテキストで選択できますか？

javascriptdrop-down-menu
7
Wooble
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;
  }
}
29
David Waters

SelectedIndexまたはループを使用してテキストでオプションを選択しますが、以下のコードは機能しません。

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

古い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;
}
0
kennebec

値ではなく内部テキストでオプションを取得したい場合は、次のようにすることができます。

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