KendoUI Multiselect删除多个

时间:2014-12-06 09:57:24

标签: kendo-ui multi-select kendo-multiselect

我正在使用Kendo UI Multiselect: http://demos.kendoui.com/web/multiselect/events.html

我有这个数据:

var data =
    [
        { text: "Shirt-Black", value: "1" },
        { text: "Shirt-Brown", value: "2" },
        { text: "Shirt-Blue", value: "3" },
        { text: "Cap-Green", value: "4" },
        { text: "Cap-Red", value: "5" },
        { text: "Cap-White", value: "6" },
        { text: "Jacket-Denim", value: "7" }
    ];

如果我选择" Shirt-Brown"然后休息衬衫,即"衬衫黑"和"衬衫蓝"不应该出现在列表中,这意味着用户不应该选择两种颜色的衬衫。

同样,如果" Cap"任何颜色的选择,然后用户不应该选择" Cap"任何其他颜色。

有没有办法实现这个目标?

1 个答案:

答案 0 :(得分:0)

这不是内置功能。您甚至无法使用dataSource filter()方法,因为它也会从列表中删除所选项目。

但是,这段代码可以满足您的要求:

$("#select").kendoMultiSelect({
    ...
    change: function(e) {
      var dataItems = e.sender.dataItems();
      var categories = [];

      for(var i = 0; i < dataItems.length; i++){
        var category = dataItems[i].text.substring(0, dataItems[i].text.indexOf('-'));
        categories.push(category);
      }

      e.sender.ul.find('li').each(function(index, value){
        var $li = $(value);
        var hidden = false;
        for(var i = 0; i < categories.length; i++){
          var category = categories[i];
          if ($li.text().match("^" + category)){
            $li.css('display', 'none');
            hidden = true;
          }
        }
        if(!hidden){
          $li.css('display', 'list-item');
        }
      });
    }
});

工作KendoUi Dojo:http://dojo.telerik.com/AGisi