Kendo ui（jquery）DropDownList - 不在下拉列表中显示选定的选项答案

【问题标题】：Kendo ui (jquery) DropDownList - do not show selected option in drop downKendo ui（jquery）DropDownList - 不在下拉列表中显示选定的选项
【发布时间】：2021-10-13 02:36:29
【问题描述】：

我想在下拉菜单中隐藏所选项目。

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",
    select: function(e){ },
    template: kendo.template($("#template").html())
  });

我尝试在选择事件时从数据源中删除该项目，并直接将文本和值分配给下拉列表。但随后值可能为空，可能是因为数据源中不存在设置的值。在剑道文档中找不到解决方案。

...
 select: function(e){
      console.log(e);
      e.preventDefault();
      let selectedItemId = e.dataItem.id;
      let 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.value() // this will return empty!!!
 },
 ...

【问题讨论】：

标签： jquery kendo-ui telerik-grid

【解决方案1】：

无需从数据源中删除项目。只需隐藏选择的任何内容。这个想法是基于这个article。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>Kendo UI DropDownList Example</title>

    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2020.2.617/styles/kendo.default-v2.min.css"/>

    <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
    <script src="https://kendo.cdn.telerik.com/2020.2.617/js/kendo.all.min.js"></script>
</head>
<body>
  
<input id="dropdownlist" style="width: 400px" />
<script>
    $(document).ready(function() {
        $("#dropdownlist").kendoDropDownList({
            dataTextField: "name",
            dataValueField: "id",
            dataSource: {
                data: [
                    { id: 1, name: "Apples" },
                    { id: 3, name: "Mangoes" },
                    { id: 2, name: "Grapes" },
                    { id: 5, name: "Papaya" },
                    { id: 4, name: "Banana" }
                ],
                
            },
            open: function(e) {
              var index = e.sender.select();
              var items = e.sender.items();
              for (var a = 0; a < items.length; a++) { 
                $(items[a]).show();
              }
              $(items[index]).hide();
            }
        });
    });
</script>

</body>
</html>

【讨论】：