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

Question

我试着在互联网上搜索，试图弄清楚这一点，但仍然没有找到确切的答案。从标准的select下拉菜单中删除一个条目非常简单，代码是：$("#dropdownlistID optionvalue='optiontoremove'").remove()；

我如何使用Kendo Dropdownlist来实现这一点，类似于$("#dropdownlistID").data("kendoDropDownList").whateverhere.remove.

这里已经有了一个答案，指出了如何删除某个索引位置的项，但这并没有回答如何删除具有某个值的选项的问题，因为索引位置可能会发生变化。所需内容的一个示例是，假设您拥有来自kendo下拉列表的这些元素。如何删除(或隐藏)带有"cruiser“的选项？

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

Answer 1

请尝试使用下面的代码片段。

<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>

如果有任何担心，请告诉我。

Answer 2

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

您可以通过使用Kendo对象及其DataSource模式来实现所需的功能。

您的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

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

我还添加了一个工具，可以在其中删除当前选定的项以确保完整性。

Answer 3

Kendo UI数据绑定小部件使用它们的dataSource instances应用程序接口来add、insert或remove项。

如果不想对项目的索引进行硬编码，则可通过其ID对其进行get。要实现此操作，必须在schema.model.id中定义ID字段

http://dojo.telerik.com/aFUGe

请注意，上面的示例没有为CRUD operations配置Kendo UI DataSource，这意味着所有更改都将仅发生在客户端，而不会持久保存到远程服务。

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