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

Не уверен, почему тело не прячется Это работает во фрагменте, но не в реальном. есть главная страница Может ли это вызвать проблемы для запуска сценария. При проверке источника просмотра я не могу найти элемент

пытается этот метод тоже

Answer 1

Я не изучал вашу реальную проблему, потому что мы можем существенно ее упростить.

Мы можем использовать атрибут данных , который содержит элементы для отображения. Скройте все элементы 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>

Answer 2

Вы не можете просто иметь одно тело - вам нужно поместить <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>