:selected

$(':selected') 1.0追加

選択状態であるoption要素を選択します。

:selectedセレクタは<options>に対してのみ有効です。 チェックボックス、ラジオボタンには:checkedセレクタを使用してください。

:selectedはjQueryが独自に拡張した仕組みでCSSには存在しない概念です。 そのため、querySelectorAll()によって提供されるパフォーマンスを享受することが出来ません。 最高のパフォーマンスを出すためには、純粋なCSSセレクタのみを使用して要素を特定し、 それに対して.filter(":selected")を適用してください。

デモ

選択されている項目を赤字のテキストで出力しています。選択を変更するとそれに応じてテキストが出力されます。

<!DOCTYPE html>
<html>
<head>
<style>
  div { color:red; }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<select name="garden" multiple="multiple">
  <option>花</option>
  <option selected="selected">苗</option>
  <option>木</option>
  <option selected="selected">球根</option>
  <option>草</option>
  <option>肥料</option>
</select>
<div></div>
<script>
  $("select").change(function () {
    var str = "";
    $("select option:selected").each(function () {
          str += $(this).text() + " ";
        });
    $("div").text(str);
  })
  .trigger('change');
</script>
</body>
</html>

 Back to top

© 2010 - 2017 STUDIO KINGDOM