セレクター selected

セレクター :selected は、 選択されている、つまり selected 属性を持つ要素を選択します。 セレクター :selected は option タグの要素に対して機能します。これは チェックボックス (checkbox) や ラジオボタン (radio) には機能せず、これらにはセレクター checked を使用してください。 :selected は CSS 仕様に属さないため、 現代のブラウザーではパフォーマンスを向上させるために、 最初に純粋な CSS セレクターを使用して要素をフィルタリングし、 その後で .filter(':selected') を適用する方が良いです。

構文

このようにして、 selected 属性を持つ要素を選択します：

javascript$(':selected');

例

ドロップダウンリストで項目が選択されるたびに、 その項目をリストの下に緑色で表示してみましょう。 最初のクリックの前に、デフォルトで選択されている項目、 つまり 'bbb' と 'ddd' が表示されることがわかります：

html<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>

cssdiv {
  color: green;
}

javascript$('select')
  .change(function() {
    let str = '';
    
    $('select option:selected').each(function() {
      str += $(this).text() + ' ';
    });
    
    $('div').text(str);
  }).trigger('change');

関連項目