Блог

Главная - Вопросы по программированию - Получить все выборки после текущего элемента select в строке

Получить все выборки после текущего элемента select в строке

#javascript #jquery

#javascript #jquery

Вопрос:

Допустим, у меня есть таблица, подобная этой, с несколькими выборками в каждой строке:

 <table>
<tr>
<td>
<select name="selectA" id="selectA">
....
</select>
</td>
<td>
<select name="selectB" id="selectB">
....
</select>
</td>
<td>
<select name="selectC" id="selectC">
....
</select>
</td>
</tr>
<tr>
<td>
<select name="selectA2" id="selectA2">
....
</select>
</td>
<td>
<select name="selectB2" id="selectB2">
....
</select>
</td>
<td>
<select name="selectC2" id="selectC2">
....
</select>
</td>
</tr>
<tr>
<td>
<select name="selectA3" id="selectA3">
....
</select>
</td>
<td>
<select name="selectB3" id="selectB3">
....
</select>
</td>
<td>
<select name="selectC3" id="selectC3">
....
</select>
</td>
</tr>
</table>

Что я хочу сделать, так это то, что при изменении элемента select я хочу получить все элементы select в той же строке после измененного элемента select и также что-то изменить с ними.

Итак, если selectA изменится, я хочу получить selectB и selectC. Если selectB изменится, я хочу получить selectC. И так далее. Как это сделать с помощью jQuery?

Ответ №1:

Попробуйте это:

 $('select').change(function() {
    $(this).parent().nextAll().find('select')...
});

т.е. взять для элемента .parent() (который будет <td> ), затем для всех его следующих братьев и сестер .nextAll() , .find() все <select> элементы внутри них.

Ответ №2:

Существует множество плагинов jquery, которые облегчают создание каскадных выпадающих списков, чего, в двух словах, вы и хотите достичь.

Вот поиск в Google по «каскадному выпадающему jquery»; практически каждый результат является плагином jQuery 🙂

Комментарии:

1. Я хотел бы сделать это без плагина. Разве это невозможно с помощью nextUntil () или какой-либо другой функции? В принципе, что я хочу сделать, так это при изменении элемента select установить первый параметр как выбранный для всех элементов select после него в той же строке.

2. Что ж, похоже, вы вроде как знаете ответ на свой вопрос 🙂 Я не знал о nextUntil() , но это выглядит как хороший кандидат. У вас возникли проблемы с селектором jquery?

3. Ну, да. Но я думаю, что я понял это. Я опубликовал ответ. Кажется, это работает.

Ответ №3:

Небольшая модификация решения Alnitak заключалась бы в том, чтобы вместо этого привязать обработчик событий на уровне таблицы, чтобы в итоге у вас была только одна функция, связанная с выполнением задания:

 $('table').change(function(event) {
    $(event.target).parent().nextAll().find('select')...
    event.stopPropagation();
});

Ответ №4:

Это позволит получить все выборки, которые находятся в одной строке:

 $("table select").change(function(){
    var $select_mates=$('select', $(this).closest('tr'));
});

Если вам не нужен сам элемент:

 $("table select").change(function(){
    var $me=$(this);
    var $select_mates=$('select', $me.closest('tr')).not($me);
});

Мое решение использует контекст выбора jQuery.

РЕДАКТИРОВАТЬ: Теперь я понял, что не видел after a current select element :). Давайте посмотрим:

 $("table select").change(function(){
    var $me=$(this);
    var $select_mates=$('select', $me.closest('tr'));
    var $select_after_mates=$select_mates.slice($select_mates.index($me) 1);
});

Ответ №5:

Хорошо, это работает, я, наконец, понял, как это сделать:

 $("table select").change(function(){
    $(this).parent().nextUntil().find("select option:first").attr("selected", "selected");
});

Комментарии:

1. Разве селектор не должен использоваться в качестве nextUntil() параметра? зачем лишнее find ?

2. технически вы хотите, .nextAll() а не .nextUntil() , хотя версия последнего без аргументов эквивалентна — смотрите Мой ответ.

3. Это означает, что каждая выборка будет привязана к обработчику событий. Я бы предпочел привязать прослушиватель к элементу tr, а затем сопоставить следующие выборки, используя свойство event.target .

Ответ №6:

я бы попробовал что-то вроде

 //"obj" being your <select> HTML element
jQuery(obj).parent().find("select").not(obj);

Обновить

Я знаю, что ответ уже есть, но я подумал, что для полноты картины я бы добавил исправление:

 //"obj" being your <select> HTML element
// .parent().parent() gets the row 
// .find("select" finds all the selects contained somewhere in that row.
// .not(obj) removes your current <select> 

jQuery(obj).parent().parent().find("select").not(obj);

Комментарии:

1. Это позволит найти только select s в том же самом td .

2. Ах, ваше право, я должен был сначала искать родительский <tr> элемент!.