jQuery - отключить выборки, которые следуют после

Question

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

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

Я собрал все выборки в форме:

var sels = obj.closest('form').find('input[type="select"]');

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

Вот структура формы:

<form action="" method="post">  

<select name="option-1" id="option-1">
    <option value="">Select one</option>
    <option value="1">Option 1</option>
    <option value="2">Option 2</option>
</select>


<select name="option-2" id="option-2">
    <option value="">----</option>
</select>

<select name="option-3" id="option-3" disabled="disabled">
    <option value="">----</option>
</select>   

</form>

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

Answer 1

В jQuery есть замечательная функция: nextAll();

Когда вы пишете обработчик событий для выбора полей, как показано ниже, вы можете перейти ко всем следующим выборам с помощью этой функции и отключить их.1005 *

Вам просто нужно правильно указать, на какие select s вы хотите повлиять.

Answer 2

С учетом следующего HTML:

<select>
    <option value="0">-Choose-</option>
    <option value="1">Valid option</option>
</select>
<select>
    <option value="0">-Choose-</option>
    <option value="1">Valid option</option>
</select>
<!-- As many selects as you like -->

Должен работать следующий jQuery:

var sels = $("select");
sels.not(":first").prop("disabled", true);
sels.change(function() {
    if($(this).val() !== "0") {
        $(this).next().prop("disabled", false);   
    }
    else {
        $(this).nextAll("select").val("0").prop("disabled", true);
    }
});

Вы можете увидеть его в действии здесь .Он просто отключает все, кроме первого select, связывает событие change со всеми из них и в обработчике событий проверяет, выбрано ли допустимое значение.Если это так, он включает следующий select.Если нет, это отключает его.Обратите внимание, что .prop требует версию jQuery как минимум 1.6.Если вам нужно использовать более старую версию, вы можете смело использовать .attr.

Answer 3

Есть несколько элементов этого, во-первых, вы можете узнать, что индекс текущего изменения выбора, используя .index ^{документы} метод.

$('select').change(function(){
   var $this = $(this);
   // find the index of the changed selects within all selects
   var index = $('select').index($this); 
})

Во-вторых, вы можете отключить все последующие варианты выбора с помощью селектора gt() ^docs .

$('select').change(function(){
    var $this = $(this);
   var index = $('select').index($this);
   $('select:gt(' + index + ')').attr('disabled',$this.val() == '');

});

Живой пример: http://jsfiddle.net/mQmfb/

Answer 4

Вы могли бы взглянуть на плагины jquery, которые уже решали бы вашу проблему. Посмотрите страницу плагина jquery для некоторых примеров.

Тем не менее, если вы хотите включить селекторы при выборе предыдущего, вам, вероятно, лучше:

1. сначала отключите все ваши выборки .
2. включить первый при загрузке страницы (или в вашем коде, в зависимости от того, как создается ваш HTML)
3. включить после выбора с событием .change() и правом селектора (в зависимости от вашего HTML-кода (следовательно, вы его не опубликовали, мы не можем вам больше помочь)