SQLの窓

2015年07月20日


jQuery でコンボボックスの選択されたオプションのテキストを取得する場合、optgroup を使っている場合は子孫選択でないと取得されないというお話 / find(子孫) と children(直近) の違い

要は、:selected Selector のお話です。

通常のコンボボックスですと、どちらでも正しく動きます。しかし、optgroup を使ってコンボボックス内に分類を作ってしまうと、option 要素の階層がが一つ深くなってしまうので選択した option 要素を取得できない事になります。

セレクタとして > を使う事はそもそもあまり無いですが、逆に必要な場合もあるので、メソッドの find(子孫) と children(直近) の違いとして覚えておくとイザという時に役に立つと思います

jQuery のコンボボックスの選択で調べると、たいていセレクタでのサンプルがヒットするのですが、.find で書いたほうが明確に意図を反映できると思うのです。(後々のメンテナンスの為に)

どうせ、onchange イベントでは $(this) から始まるので .find ですし 

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<select id="font" name="font">
	<option value="jiyunotsubasa">自由の翼フォント</option>
	<option value="kirieji" >切絵字1.0</option>

	<optgroup label="手書き">
		<option value="TanukiMagic" >たぬき油性マジック</option>
		<option value="setofont" >瀬戸フォント</option>
	</optgroup>

	<optgroup label="正統派">
		<option value="VL-PGothic-Regular" >VLゴシックフォントファミリ</option>
		<option value="ume-pgo4" >梅Pゴシック</option>
	</optgroup>

	<optgroup label="変化正統派">
		<option value="nukamiso_yamiyo_beta07" >ぬかみそ闇夜</option>
		<option value="kagamimoji-pgoth-v" >鏡文字Pゴシック-V</option>
	</optgroup>
</select>
<input type="button" value="子孫選択1" id="get_selected_text1">
<input type="button" value="子孫選択2" id="get_selected_text2">
<input type="button" value="チャイルド選択1" id="get_selected_text_child1">
<input type="button" value="チャイルド選択2" id="get_selected_text_child2">
<div id="result" style='padding:10px;border:1px solid #000;width:200px;'>
</div>
<div id="result2" style='padding:10px;border:1px solid #000;width:200px;'>
</div>
<script>
// 子孫選択( 正しい方法 )
$("#get_selected_text1").click(function(){
	alert( $("#font option:selected").text() )
});

$("#get_selected_text2").click(function(){
	alert( $("#font").find("option:selected").text() )
});

$("#font").change(function(){
	$("#result").text( $(this).find("option:selected").text() )
});

// チャイルド選択( ダメな方法 )
$("#get_selected_text_child1").click(function(){
	alert( $("#font > option:selected").text() )
});

$("#get_selected_text_child2").click(function(){
	alert( $("#font").children("option:selected").text() )
});

$("#font").change(function(){
	$("#result2").text( $(this).children("option:selected").text() )
});


</script>
表現方法で混乱します。子孫や Children とか、親子と parent とか言われるとごちゃごちゃになりそうです。ですから、この場合 find というメソッドがとても光って見えます
タグ:jquery select
【jQueryの最新記事】
posted by lightbox at 2015-07-20 13:54 | jQuery | このブログの読者になる | 更新情報をチェックする
バッチ処理

Microsoft Office
container 終わり

フリーフォントで簡単ロゴ作成
フリーフォントでボタン素材作成
フリーフォントで吹き出し画像作成
フリーフォントではんこ画像作成
ほぼ自由に利用できるフリーフォント
フリーフォントの書体見本とサンプル
画像を大きく見る為のウインドウを開くボタンの作成

Android SDK ポケットリファレンス
改訂版 Webデザイナーのための jQuery入門
今すぐ使えるかんたん ホームページ HTML&CSS入門
CSS ドロップシャドウの参考デモ
Google Hosted Libraries
cdnjs
BUTTONS (CSS でボタン)
イラストAC
ぱくたそ
写真素材 足成
フリーフォント一覧
utf8 文字ツール
右サイド 終わり
base 終わり