隐藏表单上的多个div

Question

使用基于用户选择需要隐藏或显示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> 

Answer 1

你得的div并用相同的ID的选择。它不能识别div“div2”的任何值，因为没有。

更改HTML：

<!-- Div 1 --> 

    <div class="col-md-12"> 
<div class="form-group"> 
    <select class="form-control" id="div1-selector"> 
    <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-selector"> 
    <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> 

而jQuery的引用会做。

的jsfiddle：http://jsfiddle.net/ff8hxu93/

Answer 2

存在丢失'这里$('#div3).show('fast');，你有id S中的相同。这是一个工作Fiddle。请注意更改为id s。您还应该查看$(this) - 我在第二个change听众