セレクター selected
セレクター :selected は、
選択されている、つまり
selected 属性を持つ要素を選択します。
セレクター :selected は
option タグの要素に対して機能します。これは
チェックボックス
(checkbox) や
ラジオボタン
(radio)
には機能せず、これらにはセレクター
checked を使用してください。
:selected は CSS 仕様に属さないため、
現代のブラウザーではパフォーマンスを向上させるために、
最初に純粋な CSS セレクターを使用して要素をフィルタリングし、
その後で .filter(':selected') を適用する方が良いです。
構文
このようにして、
selected 属性を持つ要素を選択します：
$(':selected');
例
ドロップダウンリストで項目が選択されるたびに、
その項目をリストの下に緑色で表示してみましょう。
最初のクリックの前に、デフォルトで選択されている項目、
つまり 'bbb' と 'ddd' が表示されることがわかります：
<select name="texts" multiple="multiple">
<option>aaa</option>
<option selected="selected">bbb</option>
<option>ccc</option>
<option selected="selected">ddd</option>
<option>eee</option>
<option>fff</option>
</select>
<div></div>
div {
color: green;
}
$('select')
.change(function() {
let str = '';
$('select option:selected').each(function() {
str += $(this).text() + ' ';
});
$('div').text(str);
}).trigger('change');
