< tbody>下拉值更改时未隐藏 [英] <tbody> not hiding when a dropdown value changed

问题描述

我有一张桌子，想在下拉值更改时隐藏或显示一些行.该页面具有主页，这是我的下拉框

I have a table and want to hide or show some group of rows when a drop down value changes. this page is having a master page Here is my dropdown box

$(function() {
  $("#ddlIncomeAssement").change(function() {
    var status = this.value;

    if (status == "FULLDOCPAYG") {
      $('#FullDocPayg').show();
      $('#FullDocSelf').hide();
      $('#LiteDoc').hide();
      $('#RentalIncome').hide();
    } else if (status == "FULLDOCSELF") {
      $('#FullDocPayg').hide();
      $('#FullDocSelf').show();
      $('#LiteDoc').hide();
      $('#RentalIncome').hide();
    } else if (status == "LITEDOC") {
      $('#FullDocPayg').hide();
      $('#FullDocSelf').show();
      $('#LiteDoc').show();
      $('#RentalIncome').hide();

    } else if (status == "RENTALINCOME") {
      $('#RentalIncome').show();
      $('#FullDocPayg').hide();
      $('#FullDocSelf').show();
      $('#LiteDoc').show();
    }
    // alert(status);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="ddlIncomeAssement">
  <option value="FULLDOCPAYG">FULL DOC-PAYG</option>
  <option value="FULLDOCSELF">FULL DOC- SELF EMPLOYED</option>
  <option value="LITEDOC">LITE DOC</option>
  <option value="RENTALINCOME">RENTAL INCOME VERIFICATION AND ASSEMENT</option>
</select>

<table>
  <tbody id="FullDocPayg">
    <tr>
      <td>FullDocPayg</td>
    </tr>
  </tbody>
  <tbody id="FullDocSelf">
    <tr>
      <td>FullDocSelf</td>
    </tr>
  </tbody>
  <tbody id="LiteDoc">
    <tr>
      <td>LiteDoc</td>
    </tr>
  </tbody>
  <tbody id="RentalIncome">
    <tr>
      <td class="light-blue-background text-center" colspan="4">RENTAL INCOME VERIFICATION AND ASSESSMENT</td>
    </tr>
    <tr class="text-left">
      <td class="text-center">6.1</td>
      <td>Confirmation of rental income held using<br /> - Rental statements;<br /> - Lease Agreement;<br /> - 2 x rental estimates (if not currently rented); or<br /> - Valuation Report (if not currently rented)
        <br /> If multiple properties use Rental Calculator and ensure correct allocation to ownership
      </td>

    </tr>
  </tbody>
</table>

不确定为什么tbody没有隐藏 它以摘要形式运行，但实际上并非如此.有一个母版页.这会导致脚本运行出现问题.检查视图源时，找不到元素

Not sure why the tbody is not hiding Its running in snippet, but not in actual one. there is a master page . Can that cause an issue for the script to run. While checking the view source, I cant find the element

也尝试此方法

推荐答案

我没有研究您的实际问题，因为我们可以大大简化它.

I haven't looked into your actual problem, because we can drastically simplify it.

我们可以使用数据属性包含要显示的元素.隐藏所有tbody元素，然后显示我们想要的元素.

We can use a data attribute which contains the elements to show. Hide all the tbody elements then show the ones we want.

$(function() {
  $("#ddlIncomeAssement").change(function() {
    $("#target tbody").hide();
    $($(this).children(":selected").data("display")).show();    
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="ddlIncomeAssement">
  <option value="FULLDOCPAYG" data-display="#FullDocPay">FULL DOC-PAYG</option>
  <option value="FULLDOCSELF" data-display="#FullDocSelf">FULL DOC- SELF EMPLOYED</option>
  <option value="LITEDOC" data-display="#FullDocSelf,#LiteDoc">LITE DOC</option>
  <option value="RENTALINCOME" data-display="#FullDocSelf,#LiteDoc,#RentalIncome">RENTAL INCOME VERIFICATION AND ASSEMENT</option>
</select>

<table id="target">
  <tbody id="FullDocPayg">
    <tr>
      <td>FULLDOCPAYG</td>
    </tr>
  </tbody>
  <tbody id="FullDocSelf">
    <tr>
      <td>FULLDOCSELF</td>
    </tr>
  </tbody>
  <tbody id="LiteDoc">
    <tr>
      <td>LITEDOC</td>
    </tr>
  </tbody>
  <tbody id="RentalIncome">
    <tr>
      <td>RENTALINCOME</td>
    </tr>
  </tbody>
</table>

这篇关于< tbody>下拉值更改时未隐藏的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！