如何使用jQuery根据首个下拉框选择启用对应二级下拉框

要完成根据第一个下拉框的选择，切换对应二级下拉框的启用状态，用jQuery可以按以下步骤实现：

1. 设置二级下拉框初始状态 #

先给两个二级下拉框的select标签添加disabled属性，默认处于禁用状态：

<!-- Outbound 二级下拉框 -->
<div class="form-group" id="claimOutbound">
    <label asp-for="ClaimStatus" class="col-md-2 control-label"></label>
    <div class="col-md-10">
        <select asp-for="ClaimStatus" class="form-control" asp-items="@await SelectLists.ClaimStatusTypes()" disabled></select>
        <span asp-validation-for="ClaimStatus" class="text-danger"/>
    </div>
</div>

<!-- Inbound 二级下拉框 -->
<div class="form-group"  id="claimInbound">
    <label asp-for="ClaimStatus" class="col-md-2 control-label"></label>
    <div class="col-md-10">
        <select asp-for="ClaimStatus" class="form-control" asp-items="@await SelectLists.InboundClaimStatusTypes()" disabled></select>
        <span asp-validation-for="ClaimStatus" class="text-danger" />
    </div>
</div>

2. 编写jQuery联动逻辑 #

在页面引入jQuery后，添加以下脚本实现联动：

$(function() {
    // 页面加载时，根据一级下拉框初始选中值同步二级框状态
    syncDropdownStatus($('#outboundInboundType').val());

    // 监听一级下拉框的切换事件
    $('#outboundInboundType').change(function() {
        syncDropdownStatus($(this).val());
    });

    // 封装状态切换逻辑
    function syncDropdownStatus(selectedVal) {
        const outboundSelect = $('#claimOutbound select');
        const inboundSelect = $('#claimInbound select');

        if (selectedVal === 'Outbound') {
            outboundSelect.prop('disabled', false);
            inboundSelect.prop('disabled', true).val('');
        } else if (selectedVal === 'Inbound') {
            inboundSelect.prop('disabled', false);
            outboundSelect.prop('disabled', true).val('');
        }
    }
});

关键说明 #

• 确保jQuery已正确引入到页面中，否则脚本无法执行。
• 确认一级下拉框的选项值确实是Outbound和Inbound（与SelectLists.OutboundInboundTypes()返回的value匹配），若值不同，需同步修改判断条件中的字符串。
• 清空禁用下拉框的选中值是为了避免表单提交无效数据，可根据业务需求决定是否保留该操作。

内容的提问来源于stack exchange，提问作者Chester