Hide and show html tab with a drop down menu

Question

這裏是我的代碼..i代碼一個php頁面，我想要的，如果我們選擇獎學金狀態yes然後一些選項如銀行名稱，分支等顯示如下，如果我們選擇獎學金狀態no，然後不顯示任何選項。

<div class="controls"> 
     <select id="" name="Scholarship info"> 
      <option value="">select</option> 
      <option value="yes">yes</option> 
      <option value="no">no</option> 
     </select> 
</div> 

，如果我們選擇yes則表明選項，否則，如果我們選擇無..not顯示以下選項....

<div class="controls"> 
     <select id="" name="Bank name"> 
      <option value="">select</option> 
      <option value="state bank">State bank</option> 
      <option value="Canera Bank">Canera bank</option> 
     </select> 
</div> 
<div class="controls"> 
     <select id="" name="Branch name"> 
      <option value="">select</option> 
      <option value="amethi">amethi</option> 
      <option value="lucknow">lucknow</option> 
     </select> 
</div> 
<div class="controls"> 
     <select id="" name="account number"> 
      <input type="text" class="span6 typeahead" name="acoountnumber" placeholder="account number" value="<?php echo 
set_value('accountnumber'); ?>" /> 

</div> 

Answer 1

LIVE DEMO

$(document).ready(function() { 

    $("select[name='Bank name']").hide(); 
    $("select[name='Branch name']").hide(); 
    $("select[name='account number']").hide(); 
    $("input[name='acoountnumber']").hide(); 


}); 


$("select[name='Scholarship info']").change(function() { 


    var selectedVal = $(this).val(); 
    if(selectedVal == 'yes') { 

     $("select[name='Bank name']").show(); 
     $("select[name='Branch name']").show(); 
     $("select[name='account number']").show(); 
     $("input[name='acoountnumber']").show(); 
    } else { 

     $("select[name='Bank name']").hide(); 
     $("select[name='Branch name']").hide(); 
     $("select[name='account number']").hide(); 
     $("input[name='acoountnumber']").hide(); 

    } 

}); 

Answer 2

如果您添加額外的課程withScholarship到div要顯示和隱藏，它變得更加容易。看到這個JSFiddle

<div class="controls"> 
    <select id="" name="Scholarship info"> 
    <option value="">select</option> 
    <option value="yes">yes</option> 
    <option value="no">no</option> 
    </select> 
</div> 
<div class="controls withScholarship"> 
    <select id="" name="Bank name"> 
    <option value="">select</option> 
    <option value="state bank">State bank</option> 
    <option value="Canera Bank">Canera bank</option> 
    </select> 
</div> 
<div class="controls withScholarship"> 
    <select id="" name="Branch name"> 
    <option value="">select</option> 
    <option value="amethi">amethi</option> 
    <option value="lucknow">lucknow</option> 
    </select> 
</div> 
<div class="controls withScholarship"> 
    <input type="text" class="span6 typeahead" name="acoountnumber" placeholder="account number" value="121"/> 
</div> 

<script type="text/javascript"> 
    $(".withScholarship").hide(); 
    $("select[name='Scholarship info']").change(function() { 
    var flag = $(this).val() == "yes"; 
    $(".withScholarship").toggle(flag); 
    }) 
</script>