隱藏表單上的多個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聽衆