jQueryで特定のoptionを取得するセレクタ

やりたいこと

<select id="id1" name="name1">
<option value="1">いぇーい</option>
<option value="2">いぇーいじゃない</option>
</select>

<select id="id2" name="name2">
<option value="1">うぉーう</option>
<option value="2">うぉーうじゃない</option>
</select>

jQueryで、「いぇーい」を操作したい。

背景

valueが1の選択肢を選択できないように(‘disable=false’)したかったのだけど、セレクタの指定方法に少し迷ったのでメモ。
年末年始でjQueryの使い方を綺麗さっぱり忘却してしまっていた。(去年の記憶、去年のうちに♪(忘却))

方法

IDがid1のSelectのうち、valueが1のものを指定する

$('select#id1 option[value="1"]')

詳細(一応)

上記指定方法が完成するまでの流れを、段階を踏んで確認

1. 「特定のselect」

まず、数あるSelect要素から、望んだものを選択する方法。

$('select#<特定のid>')

とか

$('select.<特定のclass>')

とか

$('select[name="<特定のname>"]')

とか。

上記の例だと、「いぇーい」と「いぇーいじゃない」が含まれるSelectが、対象になる。

2. 「特定のselect内にあるoption」

つぎに、1.で特定したSelect要素に含まれるOptionを選択する方法。

1.に、optionをつける。
<要素1> <要素2>(1と2の間のスペース必須)で、「要素1内の要素2」を指定できる。

$('select#id1 option')

上記の例だと、「いぇーい」と「いぇーいじゃない」が含まれるSelectにあるOption、
つまり、「いぇーい」と「いぇーいじゃない」が対象になる。

3. 「valueが1のoption」

Optionのうち、valueが1のものを指定する方法。

<要素1>[<属性>=<値>](スペースつけちゃだめ)で、「要素1のうち属性が指定した値のもの」を指定できる。

$('option[value="1"]')

↑はSelectを指定していないので、すべての、Value=1のOptionが対象になる。
つまり、上記の例だと、「いぇーい」と「うぉーう」も対象になる。

4. 「特定のselect内にある、valueが1のoption」

2.と3.を合体して完成。

$('select#id1 option[value="1"]')

これで、上記の例の、「いぇーい」が対象になる。

参考

http://www.hp-stylelink.com/news/2013/11/20131122.php

www.hp-stylelink.com