Я работаю над приложением asp.net mvc 3. Я динамически строю таблицу с данными из базы данных. У меня есть определенный случай, когда третий столбец/ячейка из строки является выпадающим списком:
<select name="YesNoNotApplicable" class="YesNoNotApplicable">
<option value="1">Yes</option>
<option value="2">No</option>
<option value="3">Not Applicable</option>
</select>
В этом случае четвертый столбец/ячейка остается пустым, и если пользователь выбирает 3 (Не применимо) в четвертой ячейке, должен быть показан текстовое поле, в котором пользователь может написать дополнительную информацию. У меня плохое знание JS и jQuery, однако я узнаю, как получить выбранное значение из выпадающего списка:
$(document).ready(function () {
$('.YesNoNotApplicable').change(function () {
alert($('.YesNoNotApplicable').val());
});
});
Но теперь вместо этого мне нужно проверить, является ли это значение 3 (это далеко не все), чтобы показать/скрыть или добавить/удалить текстовое поле из следующей ячейки или если мы поговорим в DOM prespective.
Итак, как я могу перейти к следующему классу с классом = YesNoNotApplicable и как лучше всего справиться с этим текстовым полем - поместить его во время создания таблицы, а затем показать/скрыть ее или обрабатывать его во время выполнения и добавлять/удалять его и как я могу это сделать?
Если вы используете сильно типизированные модели и html-помощники для вашего представления, было бы лучше создать элемент ввода при создании таблицы. Причина в том, что элементы, которые вы создадите с помощью jQuery, не будут привязаны к вашей модели.
$(document).ready(function () {
$('.YesNoNotApplicable').change(function () {
if($(this).val() === "3")
$(this).closest('td').next('td').find('input').show();
});
});
В обратном вызове change this будет ссылаться на элемент select. Таким образом, вы можете найти td, содержащий его с closest, а затем следующий td через next (так как вы знаете, что следующая вещь - это td, это таблица), например:
var $nextTD = $(this).closest('td').next();
В более общем случае, когда вы хотите сделать что-то подобное, но не в таблице, и родной брат, который вы хотите найти, может быть более одного элемента, вы можете использовать nextAll("selector").first(). Но если вещь, которую вы хотите, является следующим элементом, и вы в этом уверены, вам не нужно nextAll.
$(document).ready(function () {
$('.YesNoNotApplicable').change(function () {
if($(this).val() === "3"){
$(this).closest('td').next('td').find('input:text').show();
}
});
});
var nextCell = $(this).closest('td').next();
И затем вы можете работать со следующим cel.
Вы также можете использовать метод siblings() чтобы получить следующий td тег
$(document).ready(function () {
$('.YesNoNotApplicable').change(function () {
if($('.YesNoNotApplicable').val() == '3'){
$(this).closest('td').siblings().find('input').show();
}
});
});
$(document).ready(function () {
$('.YesNoNotApplicable').change(function () {
if($('.YesNoNotApplicable').val() == '3'){
$(this).closest('td').siblings().find('input').show();
}
});
});#notapplicable{
display:none;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td><select name="YesNoNotApplicable" class="YesNoNotApplicable">
<option value="1">Yes</option>
<option value="2">No</option>
<option value="3">Not Applicable</option>
</select></td>
<td><input type='text' id='notapplicable' /></td>
</tr>
</table>