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

我试着在互联网上搜索，试图找出这个问题，但仍然没有找到确切的答案。从标准发布的选择下拉列表中删除项目非常容易，代码是：$dropdownlistID option[value='optiontoremove'].remove

如何使用Kendo Dropdownlist实现这一点，类似于$dropdownlistID.datakendoDropDownList.whateverhere.remove

这里已经有一个答案指出了如何删除某个索引位置的项目，但这并没有回答如何删除某个具有特定值的选项的问题，因为索引位置可能会发生变化。一个需要说明的例子是，假设您拥有剑道下拉列表中的这些元素。。如何使用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

---

剑道UI数据绑定小部件使用它们的API来创建或创建项目

如果您不想硬编码一个项目的索引，那么可以通过它的ID进行编码。要使其工作，必须在中定义ID字段

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

---

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

请尝试使用下面的代码段

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

---

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

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

通过使用Kendo数据源对象及其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>

我在这里写了一个例子：

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

---

我还提供了一个功能，可以删除当前选定的项目以确保其完整性。

您好，谢谢您的回复。。当我对item.value（例如alertitem.value）发出警报时，该选项不起作用；它给了我4个关于收藏中4个项目的提醒，都说“未定义”。所以基本上item.value是未定义的。。有什么建议吗？非常接近解决这个问题，谢谢你的片段Nevermind Jayesh，找到了答案。。在item.value上，我需要将值设置为控件中dataValueField的名称。。非常感谢。。

// 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);
  }
});