デザイナーにも分かりやすいjQuery入門講座|jQueryの使い方

このエントリーをはてなブックマークに追加
索引
Core:コアとなる仕組み
Selectors:セレクタ
Attributes:属性
Traversing:対象の変更
Manipulation:操作
CSS:スタイルシート
Events:イベント
Effects:演出効果
Ajax:xml等との連携
Utilities:ユーティリティ
Data:データ
Miscellaneous:諸々
Deferred:処理管理
Callbacks:コールバック
Internals:内部処理

:selectedselect要素で選択されている要素を選択

構文

select要素で選択されている要素を選択
$(":selected")ver1.0〜
※:(コロン)を忘れないように注意しましょう

機能

:(コロン)に続けてselectedを設定するとselect要素で選択されている要素を選択します。対応している要素はoption要素のみです。ラジオボタンやチェックボックスの場合は:checkedを利用してください。

解説

select要素で選択されている要素を選択します

サンプル(selected/01.html)を開いてbody内の構成を確認してください。selectタグで選択肢が作成されています。

<select name="garden" multiple="multiple">
	<option>Flowers </option>
	<option>Shrubs </option>
	<option>Trees </option>
	<option>Bushes </option>
	<option>Grass </option>
	<option>Dirt </option>
</select>

jQueryは以下の様に記述され、buttonがクリックされると:selectによって選択されている要素を選択します。選択した要素はtextメソッドを利用して内容を取得しアラートで表示します。

$("button").click(function () {
	var str = $(":selected").text();
	alert(str + "が選択されています")
});

結果として、選択肢を選択(複数選択に対応しています)したあとで「選択内容の確認」ボタンをクリックするとアラートで選択肢の内容を表示します。

関連項目

ラジオボタンやチェックボックスの選択されている要素は:checkedを利用してください。
changeイベントを利用すれば、選択が変更された時の処理を設定することができます。

メモ

高速化を求めるなら

:selectedはcssには存在しないセレクタなので処理が少し重いそうです。ですので少しでも処理を軽くしたい場合はトラバースのfilterメソッドを利用して下さいとのことです。
→参考:本家サイト:selectedのAdditional Notesより

$("option:selected")//---これだと処理が少し重い
$("option").filter(":selected")//---このほうが処理が軽い