使用 jquery 从 Kendo 下拉列表中删除特定的下拉选项答案

【问题标题】：Remove specific dropdown option from Kendo dropdownlist using jquery使用 jquery 从 Kendo 下拉列表中删除特定的下拉选项
【发布时间】：2017-01-24 22:43:49
【问题描述】：

我已经尝试并搜索了互联网试图弄清楚这一点，但仍然没有找到确切的答案。从标准发布的选择下拉列表中删除项目非常简单，代码是：$("#dropdownlistID option[value='optiontoremove']").remove();

我如何使用 Kendo Dropdownlist 执行此操作，类似于 $("#dropdownlistID").data("kendoDropDownList").whateverhere.remove。

这里已经有一个答案指出如何删除某个索引位置的项目，但没有回答如何删除具有某个值的选项的问题，因为索引位置可能会发生变化。需要做的一个例子是说你有这些来自剑道下拉列表的元素。你如何删除（或隐藏）带有“巡洋舰”的选项？

select
  option value="volvo"  Volvo
  option value="saab"  Saab
  option value="mercedes"  Mercedes
  option value="audi"  Audi 
  option value="cruiser"  Cruiser
  option value="blah"  blah
  option value="blah2"  blah2
select

【问题讨论】：

标签： jquery drop-down-menu kendo-ui kendo-asp.net-mvc html-input

【解决方案1】：

请尝试以下代码 sn-p。

<input id="color" style="width: 100%;" />
<input type="button" onclick="removeItem()" value="removeItem" />
...........
...........
<script>
    $(document).ready(function () {
        var data = [
                    { text: "Volvo", value: "volvo" },
                    { text: "Audi", value: "audi" },
                    { text: "Cruiser", value: "cruiser" }
        ];

        // create DropDownList from input HTML element
        $("#color").kendoDropDownList({
            dataTextField: "text",
            dataValueField: "value",
            dataSource: data,
        });


    });
    function removeItem() {
        var ddl = $("#color").data("kendoDropDownList");
        var oldData = ddl.dataSource.data();
        var dataLength = oldData.length;
        for (var i = 0; i < dataLength; i++) {
            var item = oldData[i];
            if (item.value == "cruiser"){ // Here 'value' is 'dataValueField' field
                ddl.dataSource.remove(item);
                break;
            }
        }
    }
</script>

如果有任何问题，请告诉我。

【讨论】：

嗨，感谢您的回复.. 没有工作，当我对 item.value 发出警报时，例如 alert(item.value);它为集合中的 4 个项目给了我 4 个警报，都说“未定义”。所以基本上 item.value 是未定义的。有什么建议吗？真正接近解决这个问题，感谢sn-p
没关系 Jayesh，想通了.. 在 item.value 上，我需要将值设置为控件中 dataValueField 的名称.. 谢谢一百万..

【解决方案2】：

您不需要使用 jQuery 从下拉列表中删除特定项目。

您可以通过使用 Kendo DataSource 对象及其 MVVM 模式来实现您想要的。

您的 HTML 将如下所示：

<input id='dropdownlist' data-role="dropdownlist"
       data-text-field="ProductName"
       data-value-field="ProductID"
       data-bind="value: selectedProduct,
                  source: products" />

<button id="button" type="button">Remove current item</button>

<br />

<input class='k-textbox' id='specificItem' />
<button id="removeSpecificButton" type="button">Remove specific item</button>

你的 JavaScript 将是：

// Use a viewModel, so that any changes to the model are instantly applied to the view.
// In this case the view is the dropdownlist.
var viewModel = kendo.observable({
  selectedProduct: null,

  products: new kendo.data.DataSource({
    transport: {
      read: {
        url: "//demos.telerik.com/kendo-ui/service/products",
        dataType: "jsonp"
      }
    }
  })
});

kendo.bind($("#dropdownlist"), viewModel);

$("#removeSpecificButton").kendoButton({
  click: function(e) {
    // Find the item specified in the text box
    viewModel.products.filter( { 
                         field: "ProductName", 
                         operator: "eq", 
                         value: $('#specificItem').val() });
    // Apply the view to find it
    var view = viewModel.products.view();
    //remove the item from the datasource      
    viewModel.products.remove(view[0]);
    // disable the filter
    viewModel.products.filter({});
  }
});

// Set-up the button so that when it is clicked
// it determines what the currently selected dropdown item is
// and then deletes it.
$("#button").kendoButton({
  click: function(e) {
    // Determine which item was clicked
    var dropdownlist = $("#dropdownlist").data("kendoDropDownList"); 
    var dataItem = dropdownlist.dataItem();

    // Remove that item from the datasource
    viewModel.products.remove(dataItem);
  }
});

我在这里写了一个这样的例子：

http://dojo.telerik.com/@BenSmith/aCEXI/11

请注意 DataSource 的“过滤器”方法是如何用于指定要删除的确切项目（在本例中为 ProductName）的。删除项目后，可以删除过滤器以显示不再需要的项目的数据。

我还提供了一个工具，可以删除当前选定的项目以保持完整性。

【讨论】：

【解决方案3】：

Kendo UI 数据绑定小部件使用他们的 dataSource instances' API 到 add、insert 或 remove 项目。

如果您不想对项目的索引进行硬编码，请通过其 ID 进行get。为此，必须在 schema.model.id 中定义 ID 字段

http://dojo.telerik.com/aFUGe

注意，上面的例子没有为CRUD operations配置Kendo UI DataSource，这意味着所有的变化只会发生在客户端，不会持久化到远程服务。

如果您的 DropDownList 数据项没有 ID，那么通过其值查找项的唯一方法是使用 data 方法获取所有项，并对其进行迭代，直到找到正确的项。

【讨论】：