JQuery - выпадающие списки выбранной зависимости

Question

JQuery - выпадающие списки выбранной зависимости

0

Мне нужна помощь по зависимостям опций dropdownlist друг от друга. Скажем, у меня есть два downdownlists ниже.

<select name="List1" id="List1">
    <option value="">Select Item</option>
    <option value="a">a</option>
    <option value="b">b</option>
    <option value="c">c</option>  
    <option value="d">d</option>               
</select>

<select id="List2" name="List2">
    <option value="">Select Item</option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
</select>

Сценарии ниже:

List2 будет отображать все по умолчанию (в списке нет выбора)
Если в списке 1 выбрана опция "a" или "d", то List2 все равно останется такой же, но не будет выбрана опция.
Если в списке 2 выбрана опция "b" или "c", тогда выбрана опция 2 в списке List2, а также пользователь НЕ МОЖЕТ выбирать другие параметры в списке2.
Однако, когда пользователь выбирает "a" или "d", список снова возвращается к умолчанию, и пользователь может выбрать любые элементы в List2.

Пожалуйста, помогите с примерами кодов, если это возможно.

Благодаря,

Milacay 20 фев. 2014, в 22:31

Источник

0

Покажите нам код, который вы получили до сих пор
Huangism 20 фев. 2014, в 21:16
0

Я не знаю как Я пытаюсь .... выяснить.
Milacay 20 фев. 2014, в 21:35
0

Я думаю, у вас есть опечатка в сценарии 3. «Если опция« b »или« c »выбрана в List1», а не List2.
lebolo 20 фев. 2014, в 21:42
0

Вы правы, я сделал опечатку на этом. Благодарю.
Milacay 20 фев. 2014, в 21:48

Показать ещё 2 комментария

Теги:

jquery

1 ответ

Ещё вопросы

Покажите нам код, который вы получили до сих пор
Я не знаю как Я пытаюсь .... выяснить.
Я думаю, у вас есть опечатка в сценарии 3. «Если опция« b »или« c »выбрана в List1», а не List2.
Вы правы, я сделал опечатку на этом. Благодарю.

lebolo · Accepted Answer · 2014-02-20T18-58-00.000Z

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

// Listen for change event on List1
$("#List1").change(function (e) {

    // Find the selected value from List1
    var selectedValue = $(this).val();
    var $list2 = $("#List2");

    if (selectedValue == 'a' || selectedValue == 'd') {

        // Reset disabled options for List2
        $list2.find("option").removeAttr('disabled');

        // If you want to change the value of List2 back to some default...
        //list2.val('');
    }

    if (selectedValue == 'b' || selectedValue == 'c') {

        // Select option 2 for List2
        $list2.val('2');

        // Disable all other options
        $list2.find("option:not(:selected)").attr('disabled', 'disabled');
    }
});

Чтобы обобщить, вы должны добавить классы в опции List1 (например, class="reset-other-list" или class="restrict-other-list"). Затем вместо проверки на определенные значения проверьте, была ли выбрана опция с этим class. Это приведет к меньшим головным болям, если в будущем значения изменятся.

Большое спасибо за помощь с примерами кодов. Я постараюсь и дам вам знать.
Еще раз спасибо @lebolo. Мои выпадающие списки не совсем те, которые я опубликовал, но было бы слишком сложно их опубликовать, поскольку у них слишком много опций и сценариев для первоначального построения списка. Я следовал вашим кодам и логике, и это прекрасно работает.