Question

我试图在互联网上试图解决这个问题，但仍然没有找到确切的答案。从标准发布的选择下拉列表中删除项目非常简单，代码为：$（“＃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

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对象及其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＆＃34;过滤器＆＃34;方法已用于指定要删除的确切项（在本例中为ProductName）。删除项目后，可以删除过滤器以显示数据，而不需要不再需要的项目。

我还包括一个工具，可以删除当前所选项目的完整性。

Answer 3

Kendo UI数据绑定小部件使用dataSource instances'API来add，insert或remove项。

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

中定义ID字段

http://dojo.telerik.com/aFUGe

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

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

使用jquery

3 个答案: