隐藏并显示带有下拉菜单的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>