option要素のtext部分をみてselect要素の値をJavascriptから変更する方法について
若干わかりづらいタイトルですが次のようなことです。
下のようなhtmlがあるとします。
<select id="sampleSelect"> <option value="0">Apple</option> <option value="1">Orange</option> <option value="2">Lemon</option> <option value="3">Strawberry</option> </select>
これに対して選択中のoption要素をJavascriptから変更する機能をつける際、value属性の値を指定して選択を行うのではなくtext部分('Apple'や'Orange')をみて選択を行うための書き方について、という意味です。
value属性をみて選択するのであれば
document.getElementById('sampleSelect').value = '3';
やjQueryを使って
$('#sampleSelect').val('2');
というように書けるのですがtextを指定してselectの選択状態を変更することはできないのですこし工夫が必要になります。
jQueryを用いれば次のように書くことで選択を行うことができます。
$('#sampleSelect option').filter(function(index){ return $(this).text() === 'Strawberry'; // Strawberryを選択する場合 }).prop('selected', true);
流れとしては"$('#sampleSelect option')"で対象のselect要素内のoptionすべてを捕まえ、".filter()"で目的のoptionのみに絞り、".prop()"で選択状態にしています。
ポイントはjQueryの".filter()"メソッドが引数として要素を評価するための関数オブジェクトを受け取ることができるという点です。この関数が真を返すような条件の要素だけをのこし他を除外します。
今回の例ですと
return $(this).text() === 'Strawberry';
はtext部が'Strawberry'と一致する場合のみtrueを返すのでそれ以外の選択肢は次のprop()メソッドの対象からは外されます。
'.filter()'メソッドが条件を関数で指定できることで複雑な条件での選択を行えるのでなかなか強力な機能に思えます。
jQueryを使わずに行うならば次のように書くと選択できます。
var options = document.getElementById('sampleSelect').options; for(var i = 0; i < options.length; i++){ if(options[i].text === 'Strawberry'){ options[i].selected = true; break; }; };
こちらはoption全体をループして1つずつtextの内容を確認し、一致すればそれを選択しています。
2016/3/5追記。
jQueryを使わずに行う方法についてES 5およびES 6が使える環境で行う場合について考えた記事を書きました。
option要素のtext部分をみてselect要素の値をJavascriptから変更する方法 ES5 ES6編 - 主にプログラムを勉強するブログ