<tbody> не скрывается при изменении значения раскрывающегося списка
У меня есть таблица, и я хочу скрыть или показать некоторую группу строк при изменении значения раскрывающегося списка. у этой страницы есть главная страница Вот мой выпадающий список
$(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>. Тем не менее, ваш код работает нормально. Вам нужно будет отредактировать свой вопрос, чтобы привести пример того, что проблема воспроизводит, иначе это все равно, что пытаться попросить механика починить машину, и все в порядке.
Я не уверен, что мне не хватает. он не работает на странице. Может ли результат отличаться, если на странице есть эталонная страница
Если это asp.net и веб-формы, возможно, для изменения имени, проверьте HTML-код, отображаемый на странице, просмотрев исходный код в браузере.
В исходном виде я не могу найти ни одну из переменных, указанных в скрипте. Это веб-форма asp.net @JonP
Какие идентификаторы у tbody's при просмотре исходников?
Также проверьте идентификатор отображаемого раскрывающегося списка
Не могу найти элемент кузова. Выпадающий список отображается нормально '<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"> ПРОВЕРКА И УЧЕТ ДОХОДА ОТ АРЕНДЫ </option> </select> </div>
Ну вот и ваша проблема, если тегов tbody нет, это не сработает.
Почему элемент tbody отсутствует в источнике просмотра. Я удалил главную страницу и попробовал. но тот же эффект
Это был бы совершенно новый вопрос, поскольку мы понятия не имеем, как вы создаете таблицу. Задайте новый вопрос, не обновляйте этот.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 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>Хм. Если это действительно является причиной проблемы, возможно, я немного поспешил попытаться исправить вопрос. Я добавил строки и инкапсулирующий <table> в бит HTML OP, но я предположил, что они были слишком краткими, например, ради: P
Я не уверен, что мне не хватает. он не работает на странице. Может ли результат отличаться, если на странице есть эталонная страница
tbody отсутствует в источнике просмотра. почему это произошло
Я не рассматривал вашу настоящую проблему, потому что мы можем ее значительно упростить.
Мы можем использовать атрибут данных, который содержит отображаемые элементы. Скройте все элементы 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>Логика OP кажется немного более сложной. Например, при выборе «Доход от аренды» отображается три элементов <tbody>, а не только «Доход от аренды».
@TylerRoper, да, я только что это заметил!
В источнике просмотра отсутствует элемент tbody. любая подсказка
Можете ли вы сделать пример фрагмента с отображением проблемы?