選択したラベルを別の箇所に表示するには？

質問

お世話になります。
SELECTで選択したラベルを別の箇所に表示したいと考えており下記のように記述をしましたがどうも反応してくれません・・。

アドバイス頂けますと幸いです。

■【HTML】
<SELECT name="search_price">
<option id="sp0" value="aaa" selected><label for="aaa">りんご</label></option>
<option id="sp1" value="bbb" ><label for="bbb">みかん</label></option>
<option id="sp2" value="ccc" ><label for="ccc">たぬき</label></option>
</SELECT>
<div id ="search_price">結果未表示</div>

■【Javascript】
$(window).load(function(){
var $b = $('select[name="search_price"]');

$b.bind('change', function(){
var add = '';
$b.each(function(index, value) {★
if ('select option:selected'){★
add += '<span>' + $('select option:selected').html() + '</span>');★
}
});
if (add.length > 0) {
add = add.substring(0, add.length - 2) + '.';
} else {
add = '結果未表示';
}
$('#search_price').html(add);
});
});

選択した項目のラベル（りんご等）が#search_priceの箇所に表示をさせてたいです。

行内の★の箇所がどうも怪しいようなのですが、アドバイスのほどよろしくお願い致します。

回答No.2

LancerVII · ベストアンサー

こんにちは。

>セレクトで選択したときに項目名（<option value="1">りんご</option>の場合、りんごという文字）をJqueryで指定した箇所（<div id="samole"><div>）にリアルタイムで表示させたいと考えています。

であれば、以下の記述で実装できます。

$(function() {
//selectオブジェクトを取得
var $select = $('select[name="search_price"]');
//選択項目が変更されたら
$select.bind ( 'change', function() {
//id="search_price"に
// select内のselectedされているタグのテキストをセットする
$('#search_price').html ( $(this).find(':selected').text() );
});
});

回答No.1

LancerVII

こんにちは。

そもそも、optionタグの中にタグの記述が出来ません。

また、<label for="xxx"></label>のforで指定するのは要素のIDになります。

具体的にどのようなことがしたいかわかれば、具遺体的なアドバイスが出来ると思います。
(なぜラベルタグである必要があるか等)

補足

ご回答ありがとうございます。
そもそもOptionタグ内にラベルタグを使っていること自体がだめだったのですね・・・

セレクトで選択したときに項目名（<option value="1">りんご</option>の場合、りんごという文字）をJqueryで指定した箇所（<div id="samole"><div>）にリアルタイムで表示させたいと考えています。

どうぞよろしくお願いいたします。