隱藏並顯示帶有下拉菜單的html標簽

Question

這里是我的代碼..我的代碼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則顯示該選項；否則，如果我們選擇“否”，則不顯示以下選項。

 <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

現場演示

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

如果在要顯示和隱藏的div添加額外的類withScholarship ，它會變得更加容易。 看到這個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>