Javascript 在窗体上隐藏多个div

正在处理一个表单，其中我需要根据用户选择隐藏或显示div。我已经设法获得第一个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>

选择一个
选择1
选择2
选择3
选择4
第2部分的标签
选择一个
选择1
选择2
选择3
第3部分标签

以下是脚本：

<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>

$（文档）.ready（函数（）{
$（'#div2'）.hide（）；
$（'#div1'）。更改（函数（）{
if（$（'#div1'）.val（）>2）{
$（'div2'）。show（'fast'）；
}否则{
$（'#div2'）。隐藏（'scale'）；
}
}); 
$（'#div3'）.hide（）；
$（'#div2'）。更改（函数（）{
if（$（'#div2'）.val（）>2）{
$（'#div3）.show（'fast'）；
}否则{
$（'#div3'）。隐藏（'scale'）；
}
}); 
});
//结束就绪（）

您的div和select具有相同的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>

选择一个
选择1
选择2
选择3
选择4
第2部分的标签
选择一个
选择1
选择2
选择3
第3部分标签

jquery引用就可以了

---

jsiddle:

此处缺少一个

'

，

$（'#div3）.show（'fast'）

并且您有相同的

id

s。这是一张工作票。注意对

id

s的更改。您还应该查看

$（this）

-我在第二个

change

listener

id应该是唯一的示例中给出了它的用法。这就是你的问题所在