【JavaScript】jQueryでセレクトボックスで選択された値によって処理を変更
こんばんは。
今回はjQueryでセレクトボックスの選択状態を取得して、その値によって処理を変更するということをやりたいと思います。
セレクトボックスの値が変わるたびに、処理も自動で変わります。
今回は2つのセレクトボックス(id=sel1, id=sel2)を作り、sel1の値が0になったとき、sel2の値を1にする処理をしたいと思います。
まずはhtml側です。
<select id="sel1" name="sel1"> <option value=''>選択してください</option> <option value="0">hoge</option> <option value="1">test</option> <option value="2">test2</option> </select> <select id="sel2" id="sel2" name="sel2"> <option value=''>選択してください</option> <option value="0">hoge</option> <option value="1">test</option> <option value="2">test2</option> </select>
これはただ単にセレクトボックスを作っただけです。
次にjQuery側です。
<script type="text/javascript"> $(document).ready(function(){ sel1 = $("#sel1"); $('#sel1').bind('change', function() { if (sel1.val() == 0) sel2.val(1); }); }); </script>
こんな感じです。
select.bindでセレクトボックスの変更を検知しています。
結構簡単ですね!
今回は以上です。
それでは。