kendo-ui - 添加到 kendoMultiSelect

Question

使用新的剑道多选，我将如何将选项添加到列表中并使它们被选中？

例如，如果我有一个下拉列表，其中包含：1、2、3，并且我想添加 4 和 5，我该怎么做？我是否必须销毁多选，添加选项然后重新启动多选？

Answer 1

给定以下multiselect定义：

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");

您可以使用：

var values = multi.value();

用于获取值列表。

并将值设置为南美洲（元素为value5）和“亚洲”（元素为value3）使用：

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

如果你想为它所拥有的任何东西添加值，那么你需要一个小技巧：

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

// Adding value 4 and 5 to current content
var values = multi.value().slice();
$.merge(values, ["4", "5"]);
multi.value(values);

警告：如果已经选择了值 4 和 5，您最终会重复它们。

Answer 2

只想添加一些有关如何实际向多选添加新值的信息。

正如 OnaBai 指出的那样，将项目添加到多选的代码是

$("#SDropDown").data("kendoMultiSelect").dataSource.add({ Text: x, Value: y });

给定 .cshtml

@(Html.Kendo()
    .MultiSelect()
    .Name("SDropDown")
    .AutoBind(true)
    .Placeholder("Select s...")
    .DataTextField("Text")
    .DataValueField("Value")
)

为了添加在多选钩子中输入的项目，文本输入的更改事件。由于这不是唯一标识的，因此我使用 XPath 来获取<input>元素。这是挂钩的document.ready（在 .cshtml 中，所以 escape @）：

$(document).ready(function () {
    var node = document.evaluate('//select[@@id="SDropDown"]/../div[contains(@@class,"k-multiselect")]/input', document, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null).singleNodeValue;
    if (node)
    {
        node.onkeypress = SChanged;
    }
}

function SChanged(e)
{
    // only append on enter
    if (kendo.keys.ENTER == e.keyCode)
    {
        // updates multi-select data source
        AddToOrganizations(this.value);

        var multi = $("#SDropDown").data("kendoMultiSelect");

        multi.dataSource.filter({}); //clear applied filter before setting value

        // keep all currently selected items and append the user entered text
        // (does not check for duplicates)
        // Also, the new values can only be selected after the data source has
        // been updated.
        var values = multi.value().slice();
        $.merge(values, [this.value]);
        multi.value(values);
    }
}