Нужно каскадные варианты в выпадающем списке

Question

Нужно каскадные варианты в выпадающем списке

0

У меня есть 3 выпадающих списка с тем же набором опций, что и ниже

<select id="one">
<option value="1">Select</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
<select id="two">
<option value="1">Select</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
<select id="three">
 <option value="">Select</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>

Если пользователь выбирает вариант "один" в третьем раскрывающемся списке, "Один" не должен отображаться в выпадающем списке 1-го и 2-го. В любой момент времени, когда пользователь нажимает на любое раскрывающееся меню, должно отображаться только текущее значение вместе со значениями, которые не выбраны в другом раскрывающемся списке.

Есть ли способ достичь этого с помощью jQuery

Пожалуйста помоги.

praveen 14 март 2014, в 05:37

Источник

Теги:

jquery

html

drop-down-menu

html-select

cascadingdropdown

2 ответа

0

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

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

Вот короткий фрагмент кода

    $('.dropdown').change(function (event) {
        $('.dropdown').each(function (index, element) {

            if (event.target.id == element.id) {
                return true;            
            }

            var selectedValue = event.target.value;
            $(element).children('[value=' + selectedValue + ']').remove();
        });
    });

Вот полная рабочая демонстрация:

http://jsfiddle.net/399LF/

mystic 14 март 2014, в 03:03

0

Спасибо за вашу идею. Но вместо удаления лучше скрыть, как предлагает @felix
praveen 15 март 2014, в 06:34
0

Да, я согласен, что сокрытие будет лучше. Вы можете по крайней мере избежать циклического перебора вариантов выбранного раскрывающегося списка, используя условие if, как показано в моем коде выше.
Rahul Bhanushali 15 март 2014, в 06:42

Ещё вопросы

Спасибо за вашу идею. Но вместо удаления лучше скрыть, как предлагает @felix
Да, я согласен, что сокрытие будет лучше. Вы можете по крайней мере избежать циклического перебора вариантов выбранного раскрывающегося списка, используя условие if, как показано в моем коде выше.

Felix · Accepted Answer · 2014-03-14T03-52-00.000Z

Ваш HTML недопустим. Вам нужно закрыть <option> используя </option>

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

Тогда вы можете сделать это, чтобы достичь своих требований:

$('select').change(function () {
    var selectedVal = $(this).val();
    $(this).siblings('select').find('option[value="' + selectedVal + '"]').hide();
    $(this).siblings('select').find(':not(option[value="' + selectedVal + '"])').show();
    $(this).siblings('select').find('option:eq(0)').prop('selected', true);
});

Демо-версия скрипта

Спасибо @felix .. это работает, как ожидалось. но одно дополнительное требование ... Рассмотрим выпадающий список "Один". Когда я изменяю его на «Выбрать», я хочу, чтобы «Один» был указан во всех других выпадающих списках.