Telerik Kendo DropDownList在Select事件中获取旧值的问题

问题根源 #

你绑定的是Select事件，这个事件的触发时机是用户点击选中选项，但下拉列表的正式值还未更新的时候，所以此时调用.text()或.val()拿到的都是上一次的旧值，首次选择时自然就是OptionLabel的内容。

方案1：改用Change事件（推荐） #

Change事件是在下拉列表的值已经更新完成后触发的，能直接拿到最新的选中值。

修改MVC端的事件绑定：

@(Html.Kendo().DropDownList()
            .Name("TextActionDDL")
            .HtmlAttributes(new { style = "width:25%" })
            .OptionLabel("Select text message...")
            .DataTextField("TxtMessage")
            .DataValueField("TxtMessageText")
            .Events(x => x.Change("updateTextMsgBox")) // 把Select改成Change
            .Height(310)
            .DataSource(source =>
            {
                source.Read(read =>
                {
                    read.Action("Overview_Get_TextMessages", "Home");
                });
            })
        )

JS函数无需额外修改，即可正确获取最新值：

function updateTextMsgBox(e) {
    alert($("#TextActionDDL").data("kendoDropDownList").text());
    alert($("#TextActionDDL").val());
}

方案2：如果必须保留Select事件 #

可以通过事件参数e直接获取当前选中项的原始数据，不需要依赖控件的text/val方法：

function updateTextMsgBox(e) {
    // 获取选中项的数据模型
    var dataItem = this.dataItem(e.item);
    alert(dataItem.TxtMessage); // 对应DataTextField的内容
    alert(dataItem.TxtMessageText); // 对应DataValueField的内容
}

这样即使在Select事件里，也能拿到当前刚选中的项的正确值，不会出现滞后问题。

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