Kendo UI Web-MultiSelect：多次选择一个选项

Question

我目前在Kendo UI MultiSelect小部件上面临一个问题，即多次选择一个选项。例如，在下面的图像中，我想在选择《黑暗骑士》之后再次选择迅达的列表，但是不幸的是，小部件的行为更像是集合，而不是有序列表，即不允许重复选择。实际上是否有实现此目的的适当方法？任何解决方法？MultiSelect

Answer 1

这是多选控件的预期行为，没有简单的方法可以使用可用的配置选项使其执行所需的操作。可能的解决方法是...

创建自定义的多选小部件

像这样的事情应该起作用（请注意，我还没有做太多测试-它可以让您添加倍数并保持过滤器完整）：

(function ($) {
    var ui = kendo.ui,
        MultiSelect = ui.MultiSelect;

    var originalRender = MultiSelect.fn._render;
    var originalSelected = MultiSelect.fn._selected;

    var CustomMultiSelect = MultiSelect.extend({
        init: function (element, options) {
            var that = this;

            MultiSelect.fn.init.call(that, element, options);
        },

        options: {
            name: 'CustomMultiSelect'
        },

        _select: function (li) {
            var that = this,
                values = that._values,
                dataItem,
                idx;

            if (!that._allowSelection()) {
                return;
            }

            if (!isNaN(li)) {
                idx = li;
            } else {
                idx = li.data("idx");
            }

            that.element[0].children[idx].selected = true;

            dataItem = that.dataSource.view()[idx];

            that.tagList.append(that.tagTemplate(dataItem));
            that._dataItems.push(dataItem);
            values.push(that._dataValue(dataItem));

            that.currentTag(null);
            that._placeholder();

            if (that._state === "filter") {
                that._state = "accept";
            }
            console.log(this.dataSource.view());
        },        

        _render: function (data) {
            // swapping out this._selected keeps filtering functional
            this._selected = dummy;  
            return originalRender.call(this, data);
            this._selected = originalSelected;
        }
    });

    function dummy() { return null; }

    ui.plugin(CustomMultiSelect);
})(jQuery);

演示在这里。

使用下拉列表

使用一个简单的下拉列表（或ComboBox）并将绑定事件绑定到您的列表（必须手动创建）。

例如：

var mySelectedList = [];
$("#dropdownlist").kendoDropDownList({
    select: function (e) {
        var item = e.item;
        var text = item.text();
        // store your selected item in the list
        mySelectedList.push({
            text: text
        });
        // update the displayed list
        $("#myOrderedList").append("<li>" + text + "</li>");
    }
});

然后，您可以绑定对这些列表元素的单击，以从列表中删除元素。这样做的缺点是，它需要做更多的工作才能使其看起来“漂亮”（您必须创建并组合自己的HTML，CSS，图像等）。