jQuery ComboBox插件技术问题：实现选中ID绑定对应隐藏输入框及修复ViewBag数据无法选中的需求

针对你遇到的两个问题，我来一步步帮你解决：

问题1：页面加载时ViewBag传递的列表项无法选中 #

原因分析 #

你之前的后端代码把选中ID拼接成了类似"[1,1.1,2]"的字符串传给ViewBag，但前端拿到的是字符串类型，而ComboTree的selected参数需要的是JavaScript数组，类型不匹配导致无法识别选中项。

修复方案 #

后端修改（UserSetup方法）

直接传递数组给ViewBag，让Razor正确序列化为JS数组，同时统一ID为字符串类型（因为ComboTree返回的id是字符串，比如"1.1"）：

public IActionResult UserSetup(int id)
{
    List<GoUserDepartLink> mapping = _unitOfWork.UserDepartmentLink.GetAllDepartmentsByUserWithDepot(id);
    List<UserSalaryLocationLink> salaryMapping = _unitOfWork.User.GetUserSalaryLocations(id);
    
    // 合并部门ID和仓库ID，统一转为字符串
    var selectedDepotIds = mapping.Select(x => $"{x.DepotNo}.{x.DepartmentID}")
                                 .Concat(mapping.Select(x => x.DepotNo.ToString()).Distinct())
                                 .ToArray();
    var selectedSalaryIds = salaryMapping.Select(x => $"{x.DepotNo}.{x.DepartmentID}")
                                   .Concat(salaryMapping.Select(x => x.DepotNo.ToString()).Distinct())
                                   .ToArray();
                                   
    user.SelectedDepotMapping = string.Join(",", selectedDepotIds);
    user.SelectedSalaryMapping = string.Join(",", selectedSalaryIds);
    
    // 直接传递数组，Razor会自动序列化为JS数组
    ViewBag.DepotDepartmentMapping = selectedDepotIds;
    ViewBag.DepotLocationMappingForSalary = selectedSalaryIds;
    
    return View(user);
}

前端修改（初始化时传递正确的数组）

用@Html.Raw(Json.Serialize(...))确保ViewBag的数组被正确解析为JS数组：

FillDepartmentsMappings(@Html.Raw(Json.Serialize(ViewBag.DepotDepartmentMapping)));
FillSalaryDepotsMappings(@Html.Raw(Json.Serialize(ViewBag.DepotLocationMappingForSalary)));

问题2：将选中ID存入对应的隐藏输入框 #

解决方案 #

利用ComboTree的onChange事件监听选中变化，同时在初始化完成后手动设置一次隐藏框的值，确保页面加载时隐藏框就有正确的值：

修改前端的FillDepartmentsMappings和FillSalaryDepotsMappings函数：

function FillDepartmentsMappings(defaultSelected) {
    $.ajax({
        type: "GET",
        url: "/User/GetDepotDepartemntsForMap",
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function (data) {
            // 初始化ComboTree
            $('#ddlDepotMapping').comboTree({
                source: data,
                isMultiple: true,
                cascadeSelect: true,
                collapse: true,
                selected: defaultSelected,
                // 监听选中变化事件
                onChange: function() {
                    const selectedIds = $('#ddlDepotMapping').comboTree('getSelectedIds');
                    $('#hfDepotMapping').val(selectedIds.join(','));
                }
            });
            
            // 初始化完成后设置一次隐藏框值
            const initialIds = $('#ddlDepotMapping').comboTree('getSelectedIds');
            $('#hfDepotMapping').val(initialIds.join(','));
        },
        error: function (response) {
            console.error('加载仓库部门数据失败:', response.responseText);
        }
    });
}

function FillSalaryDepotsMappings(defaultSelected) {
    $.ajax({
        type: "GET",
        url: "/User/GetDepotDepartemntsForMap",
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function (data) {
            $('#ddlSalaryMapping').comboTree({
                source: data,
                isMultiple: true,
                cascadeSelect: true,
                collapse: true,
                selected: defaultSelected,
                onChange: function() {
                    const selectedIds = $('#ddlSalaryMapping').comboTree('getSelectedIds');
                    $('#hfSalaryMapping').val(selectedIds.join(','));
                }
            });
            
            const initialIds = $('#ddlSalaryMapping').comboTree('getSelectedIds');
            $('#hfSalaryMapping').val(initialIds.join(','));
        },
        error: function (response) {
            console.error('加载薪资位置数据失败:', response.responseText);
        }
    });
}

关键说明 #

• 使用ComboTree的getSelectedIds方法获取当前所有选中的ID，该方法返回数组
• 用join(',')将数组转为字符串，和后端SelectedDepotMapping的格式保持一致
• onChange事件确保每次用户修改选中项时，隐藏框都会同步更新
• 初始化后手动设置一次，解决页面加载时隐藏框为空的问题

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