まずはセレクトボタンを変更すると、そのテキスト情報と相応する値を取得するサンプルです。
選択された文字:
選択された値:
選択された値:
<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();