まずはセレクトボタンを変更すると、そのテキスト情報と相応する値を取得するサンプルです。
選択された文字：
選択された値：
選択された値：
<form>
<select class="demo_select">
<option value="1" selected="selected">A型</option>
<option value="2">B型</option>
<option value="3">AB型</option>
<option value="4">O型</option>
</select>
</form>
<div class="demo_log" id="demo_value1">
選択された文字：<span class="label"></span><br>
選択された値：<span class="value"></span>
</div>$(".demo_select").change(function() {
$("#demo_value1 .label").html($(".demo_select option:selected").text());
$("#demo_value1 .value").html($(".demo_select option:selected").val());
});次はラジオボタンのサンプルです。ラジオボタンはどれか一つのデータを選ぶものなので、一つの情報を取得します。
選択された文字：
選択された値：
選択された値：
<div class="demo_radio">
<label><input type="radio" name="gender" value="male">男性</label>
<label><input type="radio" name="gender" value="female">女性</label>
</div>
<div class="demo_log" id="demo_value2">
選択された文字：<span class="label"></span><br>
選択された値：<span class="value"></span>
</div>$( 'input[type="radio"]' ).change(function() {
$("#demo_value2 .label").html($(this).parent().text());
$("#demo_value2 .value").html($(this).val());
});次はチェックボックスです。複数選択が可能なので、選択された情報だけ取得します。
選択された文字：
選択された値：
選択された値：
<div class="demo_checkbox">
<label><input type="checkbox" name="gender" value="1">肉</label>
<label><input type="checkbox" name="gender" value="2">玉ねぎ</label>
<label><input type="checkbox" name="gender" value="3">人参</label>
<label><input type="checkbox" name="gender" value="4">ジャガイモ</label>
</div>
<div class="demo_log" id="demo_value3">
選択された文字：<span class="label"></span><br>
選択された値：<span class="value"></span>
</div>$('input[type="checkbox"]').change(function () {
var str = "";
var str2 = "";
$( ".demo_checkbox input[type=checkbox]" ).each(function() {
c = $( this ).prop("checked");
if(c){
str += $( this ).val() + " ";
str2 += $( this ).parent().text() + " ";
}
});
$("#demo_value3 .label").text( str2 );
$("#demo_value3 .value").text( str );
});次は、テキストの入力欄です。文字を書いて、フォーカスを外すか、エンターを押すと情報を表示します。
入力された値：
<input class="demo_text" type="text" value="" placeholder="文字入力欄">
<div class="demo_log" id="demo_value4">
入力された値：<span class="value"></span>
</div>$( ".demo_text" ).change(function() {
$("#demo_value4 .value").html($(this).val());
});最後にセレクトボックスの応用で、複数選択可能なプルダウンのサンプルです。
入力された値：BBB
<select id="demo_select" multiple="multiple">
<option>AAA</option>
<option selected="selected">BBB</option>
<option>CCC</option>
<option>DDD</option>
</select>
<div class="demo_log" id="demo_value5">
入力された値：<span class="value"></span>
</div>$( "#demo_select" ).change(function () {
var str = "";
$( "#demo_select option:selected" ).each(function() {
str += $( this ).text() + " ";
});
$( "#demo_value5 .value" ).text( str );
})
.change();
