Question

我正在开发一个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中进行通话何卫青。

那么如何导航到class = YesNoNotApplicable旁边的那个，以及处理这个文本框的最佳方法是什么 - 将它放在我正在创建表格然后显示/隐藏它的时候或者在运行时处理它并追加/删除它，我该怎么做？

Answer 1

如果您为视图使用强类型模型和html帮助器，则在创建表时创建输入元素可能会更好。原因是你通过jQuery创建的元素不会绑定到你的模型。

$(document).ready(function () {
   $('.YesNoNotApplicable').change(function () {
       if($(this).val() === "3")
         $(this).closest('td').next('td').find('input').show();
   });
});

Answer 2

在change回调中，this将引用select元素。因此，您可以找到包含closest的td，然后通过next找到下一个td（因为您知道下一个是td，这是一个表格，如下所示：

var $nextTD = $(this).closest('td').next();

在更一般的情况下，你想要做类似但不在表中的事情，并且你想要找到的兄弟可能不止一个元素，你可以使用nextAll("selector").first()。但是，如果您想要的是下一个元素，并且您确定这一点，则不需要nextAll。

Answer 3

$(document).ready(function () {
   $('.YesNoNotApplicable').change(function () {
       if($(this).val() === "3"){
         $(this).closest('td').next('td').find('input:text').show();
       }
   });
});

Answer 4

您还可以使用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>

Answer 5

var nextCell = $(this).closest('td').next();

然后你可以使用下一个cel。

使用jQuery选择表中的下一个

5 个答案: