在表单上隐藏多个div
Hiding multiple divs on form

在需要根据用户选择隐藏或显示div的表单上工作。 我设法获得了第一个div选择器值来显示第二个div，但是基于第二个div选择器值却没有显示第三个。 只是将我的头缠在Javascript上，并感谢任何帮助。

这是一般的HTML

<!-- Div 1 -->

  <div class="col-md-12">
<div class="form-group">
    <select class="form-control" id="div1">
  <option value='0'>Select one</option>
  <option value='1'>Choice 1</option>
  <option value='2'>Choice 2</option>
  <option value='3'>Choice 3</option>
  <option value='4'>Choice 4</option>

</select>
  </div>
  </div>

<!-- Div 2 -->

<div class="col-md-12" id="div2">
  <div class="form-group">
    <label for="div2">Label for Div 2</label>

    <select class="form-control" id="div2">
  <option value='0'>Select one</option>
  <option value='1'>Choice 1</option>
  <option value='2'>Choice 2</option>
  <option value='3'>Choice 3</option>

</select>
  </div>
  </div>

<!-- Div 3 -->
  <div class="col-md-6" id="div3">
  <div class="form-group">
  <label for="div3">Div 3 label</label>
  <input type="text" class="form-control" placeholder="Enter value">
 </div>
  </div>

这是脚本：

<script>

$(document).ready(function() {

    $('#div2').hide();

    $('#div1').change(function(){
        if($('#div1').val() > 2) {
            $('#div2').show('fast'); 
        } else {
            $('#div2').hide('scale'); 
        }
   }); 

    $('#div3').hide();

    $('#div2').change(function(){
        if($('#div2').val() > 2) {
            $('#div3).show('fast'); 
        } else {
            $('#div3').hide('scale'); 
        }
   }); 

  });

// end ready()

  </script>