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

Question

При поиске в Google и переполнении стека не удалось найти решение этой проблемы.

У меня есть два раскрывающихся списка в виде ядра MVC

раскрывающийся список выглядит следующим образом:

<option>A</option>
<option>B</option>

и второе раскрывающееся меню выглядит следующим образом:

<option>A1</option>
<option>A2</option>
<option>A3</option>
<option>B1</option>
<option>B2</option>

Мне нужно отключить A1, A2 и A3 во втором раскрывающемся списке, когда B выбран в первом раскрывающемся списке, и отключить B1 и B2, если A равновыбрано в первом выпадающем списке.

Я пробовал следующее, но оно не работает:

    $('#FirstDropDown').change(function () {
        var data = $(this).val();
        if (data == "A") {
            $("#SecondDropDown option[value='A1']").attr('disabled', 'disabled');
            $("#SecondDropDown option[value='A2']").attr('disabled', 'disabled');
            $("#SecondDropDown option[value='A3']").attr('disabled', 'disabled');
        }
    });

Answer 1

Когда вы пытаетесь получить доступ к значению в $("#SecondDropDown option[value='A1']"), не должно быть одинарных кавычек, окружающих значение, и вместо этого оно предназначено для атрибута HTML value, поэтому оно будет более подходящим, например так:

$('#FirstDropDown').change(function () {
    var data = $(this).val();
    if (data == "A") {
        $("#SecondDropDown option[value=B1]").attr('disabled', 'disabled');
        $("#SecondDropDown option[value=B2]").attr('disabled', 'disabled');
        $("#SecondDropDown option[value=A1]").prop('disabled', false);
        $("#SecondDropDown option[value=A2]").prop('disabled', false);
        $("#SecondDropDown option[value=A3]").prop('disabled', false);
    }
    if (data == "B") {
        $("#SecondDropDown option[value=A1]").attr('disabled', 'disabled');
        $("#SecondDropDown option[value=A2]").attr('disabled', 'disabled');
        $("#SecondDropDown option[value=A3]").attr('disabled', 'disabled');
        $("#SecondDropDown option[value=B1]").prop('disabled', false);
        $("#SecondDropDown option[value=B2]").prop('disabled', false);
    }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="FirstDropDown">
    <option selected="selected">A</option>
    <option>B</option>
</select>

<select id="SecondDropDown">
    <option value="A1">A1</option>
    <option value="A2">A2</option>
    <option value="A3">A3</option>
    <option value="B1" disabled="disabled">B1</option>
    <option value="B2" disabled="disabled">B2</option>
</select>

Обратите внимание, что необходимо отключить / повторно включить противоположную букву, когда пользователь переключается, поскольку это может произойти. Для этого я использовал метод prop(). Также обратите внимание, что вам нужно отключить B1 и B2 в начале, так как A - это первое значение в раскрывающемся списке, поэтому это значение по умолчанию выбрано для начала.