Выбор следующего тега с помощью jQuery

Question

У меня есть теги select и 2 td, как показано ниже.

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

<td id="Level3">

<td id="Level4">

Мне нужно скрыть td с идентификатором Level3, если в выборке выбран A1, и показать значение с идентификатором Level4, и наоборот.

Комбинация повторяется много раз в html, поэтому я должен найти следующие td только после тега select, используя jQuery.

Может кто-нибудь помочь?

Answer 1

Предполагая, что ваш выбор также находится внутри TD того же TR

$("#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();    
    }
    });
});

См. Рабочий пример здесь

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> элементы имеют идентификаторы, это не «повторяется» по всему коду, поскольку идентификатор уникален для каждого элемента - фильтр :lt(2) будет получать только td элементы индекса 0 и 1.