Kendo UI(jQuery) DropDownList如何实现下拉列表中隐藏已选中选项

调用value()返回为空是Kendo DropDownList的内置逻辑导致的：组件调用value()时会自动从当前绑定的数据源中匹配对应值的条目，匹配不到就返回空，你把选中条目从数据源移除后自然匹配不到，所以返回空。

方案1：下拉模板控制显隐（推荐） #

不修改核心数据源，仅在下拉列表渲染时隐藏已选中条目，数据源始终保留所有可选值，不会影响value()取值。
模板代码：

<script id="template" type="text/x-kendo-template">
<!-- 隐藏和当前选中id一致的条目 -->
# if(id != sender.value()){ #
    <span>#: name #</span>
# } #
</script>

组件初始化代码不需要修改select事件的数据源操作，原始初始化逻辑保留即可：

let data = [
      { id: 1, name: "Apples", isDeleted: false},
      { id: 3, name: "Mangoes", isDeleted: false},
      { id: 2, name: "Grapes", isDeleted: false},
      { id: 5, name: "Papaya", isDeleted: false},
      { id: 4, name: "Banana", isDeleted: false}
    ]
$("#dropdownlist").kendoDropDownList({
    dataSource: data.filter(item=> item.id != 2),
    dataTextField: "name",
    dataValueField: "id",
    template: kendo.template($("#template").html())
});

方案2：修改数据源后手动注入选中项缓存 #

如果你确实需要从数据源中移除选中条目，可以手动给组件的selectedDataItem属性赋值，绕过Kendo的数据源匹配校验：

select: function(e){
    e.preventDefault();
    const selectedItemId = e.dataItem.id;
    const selectedItemName = e.dataItem.name;
    // 更新数据源，移除选中条目
    e.sender.dataSource.data(data.filter(item => item.id!=2 && item.id != selectedItemId));
    // 手动设置文本和值
    e.sender.text(selectedItemName);
    e.sender.value(selectedItemId);
    // 关键：手动注入选中项缓存，绕过数据源匹配校验
    e.sender.selectedDataItem = e.dataItem;
    // 此时调用value()可正常返回选中的id
    console.log(e.sender.value())
},

这个方案需要注意：如果后续要对下拉组件做重置、重新赋值等操作，需要同步维护selectedDataItem的状态，避免出现数据不一致。

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