☰

jQuery の SELECT 要素で特定のオプションを選択するにはどうすればよいでしょうか? 質問する

tag-icon • tag-icon jquery
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>

ベストアンサー1

中間のオプション要素を値で取得するセレクタは

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

インデックスの場合:

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

既知のテキストの場合:

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

編集: 上でコメントしたように、OP はドロップダウンの選択項目を変更した後だった可能性があります。バージョン 1.6 以降では、prop() メソッドが推奨されます。

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

以前のバージョンの場合:

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

編集2 : ライアンのコメントの後。「選択10」の一致は望ましくないかもしれません。セレクタ全文に一致させるには、フィルター作品:

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

編集3$(e).text() :改行が含まれている場合、比較が失敗する可能性があるため注意してください。これは、オプションが暗黙的に閉じられている場合 (</option>タグなし) に発生します。

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

e.text末尾の改行などの余分な空白を単に使用する場合、それらは削除され、比較がより堅牢になります。

おすすめ記事