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

这是我的代码。我在我想要的地方编写了一个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>

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

    }

});

---

如果您向要显示和隐藏的

div

s中添加一个额外的类，

with cholarship

，则会变得更容易。看到这个了吗

选择
对
不
选择
国家银行
卡内拉银行
选择
亚米西
勒克瑙
$（“.withScholarship”）.hide（）；
$（“选择[name='Scholarship info']）。更改（函数（）{
var flag=$（this.val（）==“是”；
$（“.withScholarship”）。切换（标志）；
})

使div

可见：隐藏

，然后为

选项添加一个Javascript方法

以使div可见（如果选中该选项）。您还可以将要隐藏的控件放在一个容器div中，该容器div的类为“WithCholarship”，相同的代码也可以工作<代码>非常非常感谢..先生，这是一个很好的示例方法。没问题。请接受您最终使用的答案，并对帮助您的答案进行投票。

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

    }

});

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