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然后显示选项，否则如果我们选择不...不显示以下选项....

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

使用下拉菜单隐藏并显示html选项卡

2 个答案: