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

javascript
スポンサーリンク
スポンサーリンク

やりたいこと <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"]')

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

参考

【jQuery】要素を指定するセレクタの使い方 まとめ
jQueryを使用してDOMの操作を行いたい場合に,セレクタの指定を簡単に行う方法を紹介します.使い方を覚えてしまえば要素の取得を最小限に抑えられ,処理の高速化にもつながります.
javascript
スポンサーリンク
🐻黒くまのおむすび🍙

コメント