ＳＱＬの窓
<< jQuery UI の Spinn… | TOP | jQuery の簡単なプ… >>

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
| このブログの読者になる
| 更新情報をチェックする



















































Powered by Seesaa

 
























container 終わり































✅ フリーフォントで簡単ロゴ作成

✅ フリーフォントでボタン素材作成

✅ フリーフォントで吹き出し画像作成

✅ フリーフォントではんこ画像作成

✅ ほぼ自由に利用できるフリーフォント

✅ フリーフォントの書体見本とサンプル

✅ 画像を大きく見る為のウインドウを開くボタンの作成





































✅ CSS ドロップシャドウの参考デモ

✅ イラストAC

✅ ぱくたそ

✅ 写真素材 足成

✅ フリーフォント一覧

✅ utf8 文字ツール












右サイド 終わり



base 終わり