添加到kendoMultiSelect

Question

使用新的kendo multiselect，我如何向列表中添加选项并将其选中？

例如，如果我有一个包含：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();

获取值列表。

将值设置为南美洲（元素value 5）和＆＃34;亚洲＆＃34; （带value的元素3）使用：

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中，所以转义@）：

$(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);
    }
}