Зависимые выпадающие списки (связанные выборки) с одним классом (без других селекторов)

Question

Я пытаюсь создать несколько зависимых выпадающих (выбирает) уникальным способом. Я хочу ограничить использование селекторов и хочу добиться этого с помощью одного селектора класса на всех SELECT s; вычисляя SELECT, который был изменен его индексом. Следовательно, измененный SELECT[i] изменит только SELECT[i+1] (а не предыдущие, такие как SELECT[i-1]).

Для HTML, как это:

<select class="someclass">
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
    <option value="mercedes">Mercedes</option>
    <option value="audi">Audi</option>
</select>

<select class="someclass">
</select>

<select class="someclass">          
</select>

где SELECT s, кроме первого, получит что-то через AJAX.

Я вижу, что следующий Javascript дает мне правильное значение правильного SELECT, а значение i также соответствует правильному SELECT.

$(function() {
    $(".someclass").each(function(i) {
        $(this).change(function(x) {
            alert($(this).val() + i);
        });
    });         
});

Обратите внимание, что я действительно хочу подход минимального селектора. Я просто не могу понять, как к этому подойти. Должен ли я использовать массивы? Как сохранить все SELECTS в массиве, а затем выбрать их?

Я полагаю, что, поскольку вышеприведенный код уже проходит индекс i, также должен быть способ без массивов.

Спасибо большое. AJ

UPDATE:

Вот несколько лучшее описание:

1. На странице более 2 `SELECT` с классом `someclass`. SELECT [0] изначально имеет некоторые значения, и его наследники пусты, так как они будут меняться в зависимости от значения соответствующего непосредственного предка.
2. Если в `SELECT [i]` есть изменение, оно генерирует событие, и в `SELECT [i + 1]` вводятся соответствующие `OPTION`s.
3. `SELECT [i + 2]` и другие преемники сбрасываются, если у них ранее были какие-либо данные. Таким образом, заполняется только непосредственный ребенок, но дальнейшие преемники сбрасываются.

Надеюсь, я хорошо сформулировал. Пожалуйста, дайте мне знать, если вам нужно больше разъяснений о том, что я хочу.

Answer 1

РЕДАКТИРОВАТЬ: Исправленная версия.

$(function() {
    var $all = $('.someclass');              // Reference all the selects
    var last = $('.someClass').length - 1;   // Store index of last select

     $(".someclass").change(function() {

        var $th = $(this);           // Reference the changed select

        var index = $all.index($th);     // Grab the index of the changed select

        if(index != last) {              // If the selected wasn't the last,

            var $next = $all.eq(index + 1)      // reference the next select

            $all.filter(':gt(' + index + ')').empty(); // and empty all selects greater than the 
                                                       // index of the changed one.
                                                       // This will include the one that is about
                                                       //     to be populated.
                // Then presumably perform some AJAX
                //    based on $th.val(); to populate
                //    $next with options.
         }
    });         
});

Answer 2

Внутри change() вы можете получить следующий элемент выбора, используя функцию eq().

$('.someclass').eq(i + 1);

В качестве альтернативы (и, я думаю, лучше) вы также можете использовать функцию next().

$(this).next('.someclass');