如何简化：从主下拉列表为多个下拉列表赋值的代码实现

核心优化思路 #

• 删掉冗余的隐藏表单元素，只留两个可见下拉：一个选客户，一个显示客户偏好食物并设为不可编辑
• 后端不用生成额外的SelectList，直接用已查询的客户关联食物数据
• 简化JS逻辑，减少DOM操作，直接通过客户选择事件更新食物下拉

修改后的前端代码 #

<div class="form-group border">
    <!-- 客户选择下拉 -->
    <select class="form-control text-primary border-0 select2-container fw-bold overflow-scroll" 
            style="max-height:320px;" id="customerSelect">
        <option selected>--- 选择客户 ---</option>
        @foreach (var item in Model.PL)
        {
            <option value="@item.Id" data-food-id="@item.FoodId" data-food-name="@item.Food.Name">@item.CustomersName</option>
        }
    </select>
</div>

<div class="form-floating">
    <!-- 偏好食物下拉（不可编辑） -->
    <select class="form-control bg-white text-primary fw-bold" id="foodSelect" disabled>
        <option selected>--- 客户偏好食物 ---</option>
    </select>
</div>

• 把自定义属性改成标准data-*格式，更符合HTML规范
• 给下拉起语义化ID，便于维护
• 食物下拉直接设置disabled属性，实现不可编辑需求

修改后的JavaScript代码 #

@section Scripts {
    @{await Html.RenderPartialAsync("_ValidationScriptsPartial");}
    <script src="~/lib/bootstrap/select2/js/select2.min.js"></script>

    <script type="text/javascript">
        $(function() {
            // 初始化Select2组件
            $('#customerSelect').select2({
                theme: "bootstrap-5",
                width: '100%',
                tags: true
            });

            // 客户选择切换事件
            $('#customerSelect').change(function () {
                const selectedOpt = $(this).find('option:selected');
                const foodId = selectedOpt.data('food-id');
                const foodName = selectedOpt.data('food-name');

                // 更新食物下拉内容
                const $foodSel = $('#foodSelect');
                $foodSel.empty().append(`<option value="${foodId}" selected>${foodName}</option>`);
                // 确保下拉始终不可编辑
                $foodSel.prop('disabled', true);
            });
        });
    </script>
}

• 合并两个独立的script块，逻辑更集中
• 用data()方法读取自定义属性，比直接读attr更可靠
• 直接操作食物下拉的选项，不需要再维护隐藏元素

修改后的后端代码 #

PL = await _context.Customers.Include(x => x.Food).ToListAsync();
// 移除以下冗余代码：
// ViewData["CustomersId"] = new SelectList(_context.Customers, "Id", "CustomersName");
// ViewData["FoodId"] = new SelectList(_context.Foods, "FoodId", "Name");

• 删掉不需要的ViewData生成，因为前端已经直接用PL的数据渲染客户下拉，无需额外生成SelectList

补充说明 #

• 禁用的下拉框在表单提交时会正常提交选中的value（即FoodId），完全满足下单时的参数需求
• 简化后的代码减少了DOM元素数量，逻辑更清晰，后续维护成本更低

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