Question

在我需要根据用户选择隐藏或显示div的表单上工作。我设法得到第一个div选择器值来显示第二个div，但是第三个没有根据第二个div选择器值显示。只是把我的脑袋缠绕在Javascript＆amp;感谢任何帮助。

这是一般的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和选择。它无法识别div的任何值＆＃34; div2＆＃34;因为没有。

更改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相同。这是一个有效的Fiddle。请注意对id的更改。您还应该查看$(this) - 我在第二个change监听器中提供了一个使用示例

在表单上隐藏多个div

2 个答案: