<tbody> 下拉值更改时不隐藏

Question

我有一个表格，想要在下拉值更改时隐藏或显示一组行。这个页面有一个母版页这是我的下拉框

$(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 没有隐藏 它在 sn-p 中运行，但不是在实际中运行。有一个母版页。这是否会导致脚本运行出现问题。检查视图源时，我找不到元素

也尝试this method

Answer 1

您不能只拥有 tbody —— 您需要将 <tr><td> 放入其中。请参见下面的示例：

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

    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);
});

#FullDocPayg{display:none;}
#FullDocSelf{display:none;}
#LiteDoc{display:none;}
#RentalIncome{display:none;}

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

<br>

<table>
  <tbody id="FullDocPayg"><tr><td>This is FullDocPayg</td></tr></tbody>
  <tbody id="FullDocSelf"><tr><td>Full Doc Self</td></tr></tbody>
  <tbody id="LiteDoc"><tr><td>Lite Doc</td></tr></tbody>
  <tbody id="RentalIncome"><tr><td>Rental Income</td></tr></tbody>
</table>

Answer 2

我没有调查您的实际问题，因为我们可以大大简化它。

我们可以使用包含要显示的元素的data attribute。隐藏所有 tbody 元素，然后显示我们想要的元素。

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