[解決済み] jQueryのSELECT要素で特定のオプションを選択するにはどうすればよいですか？

質問

インデックス、値、テキストがわかっている場合、また直接参照するためのIDがない場合。

これは , これ そして これ は、いずれも参考になる回答です。

マークアップ例

<div class="selDiv">
  <select class="opts">
    <option selected value="DEFAULT">Default</option>
    <option value="SEL1">Selection 1</option>
    <option value="SEL2">Selection 2</option>
  </select>
</div>

解決方法は？

真ん中のoption要素を値で取得するセレクタは

$('.selDiv option[value="SEL1"]')

インデックスの場合。

$('.selDiv option:eq(1)')

既知のテキストの場合。

$('.selDiv option:contains("Selection 1")')

EDIT : 上記のコメント通り、OPはドロップダウンの選択項目を変更した後だったのかもしれません。バージョン1.6以降では、prop()メソッドを推奨します。

$('.selDiv option:eq(1)').prop('selected', true)

古いバージョンでは

$('.selDiv option:eq(1)').attr('selected', 'selected')

EDIT2 : Ryanのコメントの後。Selection 10でマッチングすると、不要になる可能性があります。私は セレクタ は全文にマッチしますが フィルタ が動作します。

 $('.selDiv option')
    .filter(function(i, e) { return $(e).text() == "Selection 1"})

EDIT3 : には注意が必要です。 $(e).text() は、改行が含まれていると比較に失敗することがあるからです。 これは、オプションが暗黙のうちに閉じられている場合( </option> タグ)を使用します。

<select ...>
<option value="1">Selection 1
<option value="2">Selection 2
   :
</select>

を単純に使用すると e.text のような余分な空白は削除され、比較はより強固になります。