如何根据另一个下拉菜单禁用下拉选项值
How to disable dropdown option values based on another dropdown
搜索 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');
}
});
当您尝试访问 $("#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>
请注意,当用户切换时,您必须 un-disable/re-enable 相反的字母,因为这可能会发生。为此,我使用了 prop()
方法。另请注意,您需要在开始时禁用 B1 和 B2,因为 A 是下拉列表的第一个值,因此它是开始的默认选择值。
搜索 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');
}
});
当您尝试访问 $("#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>
请注意,当用户切换时,您必须 un-disable/re-enable 相反的字母,因为这可能会发生。为此,我使用了 prop()
方法。另请注意,您需要在开始时禁用 B1 和 B2,因为 A 是下拉列表的第一个值,因此它是开始的默认选择值。