有两个问题要记住:
- 如何从列表中过滤选项:您应该使用
filter。
- 拦截
change 事件,以便分析选择了哪些选项,如果选择了“全选”,则过滤列表中的每个选项。
你应该做的是:
var multi = $("#colors").kendoMultiSelect({
dataSource: [
{ name: "Select All" },
{ name: "Red" },
{ name: "Green" },
{ name: "Blue" }
],
dataTextField: "name",
dataValueField: "name",
change: function(e) {
// Get selected options
var values = this.value();
if ($.inArray("Select All", values) != -1) {
// If "Select All" is in the list
// Remove other possibly selected options
multi.value("Select All");
// Remove any option from the datasource
multi.dataSource.filter({ field : "name", operator : "eq", value : "Select All"});
} else {
// Clean filter
multi.dataSource.filter({ });
}
}
}).data("kendoMultiSelect");
在这里查看:http://jsfiddle.net/OnaBai/9nVdq/6/
编辑:如果你想做一个通用函数来处理这个“全选”,你应该将 MultiSelects 定义为:
var multi = $("#colors").kendoMultiSelect({
dataSource: colors,
dataTextField: "name",
dataValueField: "name",
change: selectAll
}).data("kendoMultiSelect");
$("#cities").kendoMultiSelect({
dataSource: cities,
dataTextField: "name",
dataValueField: "name",
change: selectAll
});
函数selectAll为:
function selectAll(e) {
// Get selected options
var values = this.value();
if ($.inArray("Select All", values) != -1) {
// If "Select All" is in the list
// Remove other possibly selected options
this.value("Select All");
// Remove any option from the datasource
this.dataSource.filter({ field : "name", operator : "eq", value : "Select All"});
} else {
// Clean filter
this.dataSource.filter({ });
}
}
“诀窍”是this 引用当前的multiselect。
在此处查看实际操作:http://jsfiddle.net/OnaBai/9nVdq/8/