Question

我有select和2 td个标签，如下所示。

<select name="accesslevel"><option value="A1">A1</option>
<option value="A2">A2</option></select>

<td id="Level3">

<td id="Level4">

如果在select中选择了A1并且使用Level4 id显示td，我需要隐藏具有Level3 id的td，反之亦然。

组合在html中重复多次，因此，我必须在使用jQuery的td标记之后找到下一个select。

有人可以帮忙吗？

Answer 1

假设您的Select也位于同一TR的TD中

$("#accesslevel").change(function(){ //give an id to your select box
  if(condition){
    $(this).parent().nextAll("#Level3").hide();
    $(this).parent().nextAll("#Level4").show();
  }
});

这只是给你一个想法。显然，您可以通过将父项存储在变量中然后搜索其他节点来优化代码。

想法是找到父TD，然后使用nextAll找到其他TD。您还可以找到父行TR，然后使用TR.children（“＃Level3”）

Answer 2

$(document).ready(function(){    
    $("select[name='accesslevel']").change(function(){    
    if($(this).val()=="A1")    
    {    
        $(this).parent().next().find("td[id='Level3']").show();    
        $(this).parent().next().find("td[id='Level4']").hide();     
    }     
    if($(this).val()=="A2")     
    {
        $(this).parent().next().find("td[id='Level3']").hide();    
        $(this).parent().next().find("td[id='Level4']").show();    
    }
    });
});

查看工作示例here

Answer 3

如果没有看到您的所有标记，我想知道您的<select>是否应该包含在<td>中？

<td><select>...</select></td>
<td class="level3">
<td class="level4">

在这种情况下，您可以执行类似

的操作

$('select#someId').change(function() {
  var $nextTds = $(this).parents('td:first').nextAll('td:lt(2)');
  //manipulate $nextTds
]

如果您的<td>元素具有ID，则不会在整个代码中“重复”，因为ID对于每个元素都是唯一的 - :lt(2) 过滤器将仅检索 td 索引元素 0 和 1。

使用jQuery选择下一个标记

3 个答案: