Question

搜索google和堆栈溢出，找不到解决方案。

我在MVC核心视图中有两个下拉菜单

下拉菜单如下：

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

第二个下拉菜单如下：

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

在第一个下拉列表中选择B时，我需要在第二个下拉列表中禁用A1，A2和A3，而在第一个下拉列表中选择A时，则禁用B1和B2。

我尝试了以下操作，但不起作用：

    $('#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()方法。还请注意，由于A是下拉列表的第一个值，因此您需要在开始时禁用B1和B2，因此它是默认的默认选择值。

如何基于另一个下拉菜单禁用下拉菜单选项值

1 个答案: