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>