ASP.NET MVC 创建级联下拉框后功能失效问题求助

你的核心问题是动态添加<option>后没有重新初始化Materialize的下拉组件。Materialize框架会把原生<select>转换成自定义UI组件，直接修改DOM选项后，必须重新触发初始化才能让新选项生效。

修复步骤： #

1. 在AJAX请求的回调函数中，添加完选项后调用formSelect()重新初始化下拉：

$.get("/KPIs/GetFilteredUsers",
    {
        critID: $("#CriteriasList").val()
    },
    function (result)
    {
        $("#EmployeesList").empty();

        $.each(result, function (i, item) {
            $("#EmployeesList").append("<option value='" + item.value + "'>" + item.text + "</option>");
        });
        // 关键：重新初始化下拉组件，让新选项生效
        $("#EmployeesList").formSelect();
    });

2. 额外优化建议：
   • 把原生DOM操作换成jQuery写法，代码更简洁：比如document.getElementById('employees').style.display = "block"可以改成$("#employees").show()，隐藏用$("#employees").hide()。
   • 缓存DOM元素避免重复查找：函数开头定义const $criteriasList = $("#CriteriasList")，后续直接用$criteriasList.val()。

完整修正后的JS代码： #

$(document).ready(function () {
    $('select').formSelect();
});

function onCriteriaChange() {
    const criteriaID = $("#CriteriasList").val();
    const criterias = @Html.Raw(Json.Serialize(Model.Criterias));
    const $employeesContainer = $("#employees");
    const $employeesList = $("#EmployeesList");

    for (var i = 0; i < criterias.length; i++) {
        if (criterias[i].id == criteriaID) {
            if (criterias[i].isIndividual) {
                $.get("/KPIs/GetFilteredUsers",
                    { critID: criteriaID },
                    function (result) {
                        $employeesList.empty();
                        $.each(result, function (i, item) {
                            $employeesList.append(`<option value='${item.value}'>${item.text}</option>`);
                        });
                        // 重新初始化下拉
                        $employeesList.formSelect();
                    });
                $employeesContainer.show();
            } else {
                $employeesContainer.hide();
            }
            break;
        }
    }
}

验证要点： #

确认后端返回的result数组中每个对象确实包含value和text属性（对应员工的GID和FullName），如果字段名不一致，需要把item.value和item.text改成实际字段名，比如item.GID和item.FullName。

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