:selected
- $(':selected') 1.0追加
- デモ
$(':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>
© 2010 - 2017 STUDIO KINGDOM