如何在Kendo DropDownList异步DataSource变更事件中设置值？

嘿，针对你这个Kendo DropDownList的需求，其实在onCompanyChange函数里可以很方便地拿到异步加载的数据源里的完整数据项，然后按需设置值。我给你拆解下具体怎么做：

第一步：获取选中的完整公司数据 #

不管你的数据源是异步还是同步加载的，Kendo的DropDownList变更事件参数e里的sender对象，提供了dataItem()方法，能直接拿到当前选中的那条完整数据——这就意味着你能访问到后端返回的所有字段（比如你注释里提到的Code）。

代码示例：

function onCompanyChange(e) {
    // 拿到选中的公司数据项
    const selectedCompany = e.sender.dataItem();
    
    // 先判断有没有选中项，避免清空选择时出错
    if (selectedCompany) {
        // 这里就能获取到你需要的Code字段了
        const companyCode = selectedCompany.Code;
        const companyName = selectedCompany.Name;
        
        // 接下来看你要把值设到哪里，下面是几种常见场景
    }
}

第二步：根据需求设置值的常见场景 #

场景1：给另一个Kendo控件赋值（比如文本框、下拉框） #

比如你要把选中公司的Code放到一个Kendo TextBox里：

function onCompanyChange(e) {
    const selectedCompany = e.sender.dataItem();
    const codeTextBox = $("#CompanyCode").data("kendoTextBox");
    
    if (selectedCompany) {
        codeTextBox.value(selectedCompany.Code);
    } else {
        // 清空选择时也要同步清空目标控件
        codeTextBox.value("");
    }
}

场景2：给隐藏域赋值（用于表单提交绑定模型） #

如果你的模型里有CompanyCode字段，不想让用户看到但需要提交，可以加个隐藏域，然后在事件里赋值：

function onCompanyChange(e) {
    const selectedCompany = e.sender.dataItem();
    // 给隐藏域设值，清空时就设为空字符串
    $("#CompanyCode").val(selectedCompany ? selectedCompany.Code : "");
}

对应的Razor代码要加个隐藏域：

@Html.HiddenFor(model => model.CompanyCode)

场景3：更新其他表单元素 #

要是你需要把值设到普通的input或者其他元素里，直接用jQuery的val()或者text()方法就行，和常规前端操作一样。

几个要注意的点 #

• 一定要判断selectedCompany是否存在！当用户清空DropDownList的选择时，dataItem()会返回undefined，不判断的话会报“无法读取属性'Code'”的错误。
• 确保后端GetCompanies接口返回的数据里包含Code字段，不然前端拿不到这个值哦。

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