Kendo UI jQuery DropDownList新增项默认选中及列表关闭问题求助

问题原因分析 #

1. 新增项无法选中：原代码通过dataSource.view().length - 1获取索引，但sync完成后数据源视图可能因后端同步逻辑发生变化，导致索引匹配失败；且仅调用select未确保组件状态同步。
2. 下拉列表不关闭：未显式调用DropDownList的close()方法，组件不会自动收起下拉面板。

解决方案 #

修改addItem函数中的sync事件处理逻辑，确保选中新增项并关闭下拉：

function addItem(widgetId, newName) {
    var widget = $("#" + widgetId).data("kendoDropDownList");
    var dataSource = widget.dataSource;
    
    // 记录新增项的uid，用于后续精准匹配
    var newItem = dataSource.add({
        id: 0,
        name: newName,
    });
    var newItemUid = newItem.uid;

    dataSource.one("sync", function() {
        // 通过uid精准定位新增项，避免索引偏移问题
        var targetIndex = dataSource.view().findIndex(item => item.uid === newItemUid);
        if (targetIndex !== -1) {
            widget.select(targetIndex);
            // 触发change事件，确保组件状态与选中项同步
            widget.trigger("change");
            // 关闭下拉面板
            widget.close();
        }
    });

    dataSource.sync();
}

关键调整点 #

• 精准定位新增项：通过记录新增项的uid查找索引，避免因数据源视图变化（如后端同步后数据排序改变）导致的索引错误。
• 同步组件状态：调用widget.trigger("change")确保组件内部状态与选中项一致，避免显示值与实际值不匹配。
• 显式关闭下拉：调用widget.close()强制收起下拉面板，解决面板保持展开的问题。

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