在表单上隐藏多个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

您已经获得了具有相同ID的div和selects。 它无法识别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相同。 这是工作中的小提琴 。 注意对id s的更改。 您还应该检查$(this) -我在第二个change侦听器中提供了其用法示例