Kendo ui Multi Select Remove Selected element usin

问题:

I am using kendo ui multiple select

http://demos.kendoui.com/web/multiselect/events.html

i have this code

var data =
        [
            { text: "Africa", value: "1" },
            { text: "Europe", value: "2" },
            { text: "Asia", value: "3" },
            { text: "North America", value: "4" },
            { text: "South America", value: "5" },
            { text: "Antarctica", value: "6" },
            { text: "Australia", value: "7" }
        ];

var multi = $("#select").kendoMultiSelect({
    dataTextField: "text",
    dataValueField: "value",
    dataSource: data
}).data("kendoMultiSelect");

now i can add the values using this

multi.value(["5", "3"]);

now i want to remove from the selected values

is there any way to remove the values using value or text

for example if i want to remove 5 then is there any method like multi.remove(["5"]);

or any other way to remove it???

回答1:

For removing element from a MultiSelect programmatically, you can use:

// Elements to be removed
var subtract = ["1", "5"];
// Get copy of current selected elements
var values = multi.value().slice();
// Remove elements from subtract
values = $.grep(values, function(a) {
    return $.inArray(a, subtract) == -1;
});
// Clean filtering
multi.dataSource.filter({});
// Set new values
multi.value(values);

Where subtract are the elements to be removed (in this example "1" and "5").

TIP: For adding, you can use:

// Elements to add
var add = ["4", "5"];
// Get copy of current selected elements
var values = multi.value().slice();
// Merge withe elements to add
var merge = $.merge(values, add);
// Clean filtering
multi.dataSource.filter({});
// Remove duplicates and set them back
multi.value($.unique(merge));

Running example in here : http://jsfiddle.net/OnaBai/9WfGA/

回答2:

This is already answered but this mught help someone. I had the same issue, wanted to remove values but didn't had the values to remove. This helped me out. It will remove all the selected values from dropdown

Add a css class to page

.hide-selected > li.k-state-selected {
    display: none;
}

and add this code to pageload

var multiselect= $("#select").data("kendoMultiSelect");
multiselect.ul.addClass('hide-selected');