Furudateのブログ

プログラミングやネットワーク系の知識・技術がメインのブログ。技術メモ帳的な感じになるかと。岩手から発信していきます。

【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でセレクトボックスの変更を検知しています。

結構簡単ですね!


今回は以上です。
それでは。