選択オプションのラベルのテキストを取得し、非表示の入力フィールドに入力したいと思います。
値を取得できますが、オプションが選択または変更されたときに非表示フィールドに入力する方法を知りたいです。私は実際にはjqueryの初心者なので、選択オプションに関連するイベントについてはまったくわかりません。
フィドル: http://jsfiddle.net/m5A9U/
コード
あなたのHTMLが
<select id="select">
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
<input type='hidden' id='hidden' value=''/>
jqueryコードは
$("#select").change(function () {
$("#hidden").val($(this).val());
//alert($(this).val())
})
編集選択したオプションのラベルを取得するには、試してください
$("#hidden").val($(this).find('option:selected').text());
更新された例: http://jsfiddle.net/m5A9U/1/
この単純なjsFiddleを作成しました。理解を深めるためにコメントに従ってください。純粋な JavaScript を使用するソリューションと、jQuery を使用する別のソリューションがあります。
- 編集 -
元の質問の一部ではない場合でも、ここではjsFiddle 2が値の代わりに「ラベル」を取得する方法です。
select 入力のテキストに基づいて人間が読めるテキストに変換したい値のリストがある場合:
HTML
<div id="current_values"></div>
<select id="id_select">
<option value="1">First Option</option>
<option value="2">Second Option</option>
<option value="3">Third Option</option>
</select>
JavaScript
var values = [1,3];
for(var i = values.length; i >=0; i--){
$("#current_Values").append($('#id_select option[value="'+ values[i] +'"]').text()+"<br>");
}
ラベルがどのように設定されているかを正確に把握するには、HTML を確認する必要がありますが、基本的な例を次に示します。
$("#sel1").change(function () {
$("#myInput").val(($("label[for=" + $(this).attr("id") + "]").text()));
});