jQuery 如何在剑道多选上设置数据值？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16113029/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to set data values on Kendo Multi Select?
提问by Rodney
I'm using a Kendo Multi Select. I want to load selected values into the multi select. How do you set the data values in Java Script? I have the following script:
我正在使用剑道多选。我想将选定的值加载到多选中。如何在 Java Script 中设置数据值？我有以下脚本：
$('#selectedFilters').kendoMultiSelect({
dataSource: data,
dataTextField: 'name',
dataValueField: 'value',
filter: 'contains',
placeholder: "Add Filter",
delay: 0,
minLength: 2,
highlightFirst: true,
ignoreCase: true,
change: function (event) {
applyFilters();
},
});
回答by OnaBai
You can use value()method for setting the values.
您可以使用value()方法来设置值。
Example, give the following HTML:
例如，给出以下 HTML：
<a href="#" id="button" class="k-button">Select</a>
<input id='selectedFilters'>
and the JavaScript:
和 JavaScript：
var data = [
{ name : "name1", value : "value1" },
{ name : "name2", value : "value2" },
{ name : "name3", value : "value3" },
{ name : "name4", value : "value4" },
{ name : "name5", value : "value5" },
{ name : "name6", value : "value6" }
];
var multiselect = $('#selectedFilters').kendoMultiSelect({
dataSource : data,
dataTextField : 'name',
dataValueField: 'value',
filter : 'contains',
placeholder : "Add Filter",
delay : 0,
minLength : 2,
highlightFirst: true,
ignoreCase : true,
change : function (event) {
console.log("change");
}
}).data("kendoMultiSelect");
$("#button").on("click", function () {
console.log("multiselect", multiselect);
multiselect.value(["value1", "value2", "value6"]);
});
If you click on buttonthe multi-value inputgets: name1, name2and name6.
如果单击button多值input获取：name1、name2和name6。
EDITIf you want to add to current selected values then do:
编辑如果要添加到当前选定的值，请执行以下操作：
$("#button").on("click", function () {
var selected = multiselect.value();
var res = $.merge($.merge([], selected), ["value1", "value2", "value6"]);
multiselect.value(res);
});
NOTE: For some sort of reason you cannot reuse selectedarray for setting new values, so you should create a new one.
注意：由于某种原因，您不能重用selected数组来设置新值，因此您应该创建一个新值。
Check it running here
检查它在这里运行
回答by kashyapa
there is a easier way to do this. all kendo controls have a rich client side API. So here is the API documentation page of MultiSelect - http://docs.kendoui.com/api/web/multiselect
有一种更简单的方法可以做到这一点。所有剑道控件都有丰富的客户端 API。所以这里是 MultiSelect 的 API 文档页面 - http://docs.kendoui.com/api/web/multiselect
Now coming to your problem - here is my solution:
现在来解决您的问题 - 这是我的解决方案：
Markup:
标记：
<select id="required" multiple="multiple" data-placeholder="Select attendees...">
<option>Steven White</option>
<option>Nancy King</option>
<option>Anne King</option>
<option>Nancy Davolio</option>
<option>Robert Davolio</option>
<option>Michael Leverling</option>
<option>Andrew Callahan</option>
<option>Michael Suyama</option>
<option>Anne King</option>
<option>Laura Peacock</option>
<option>Robert Fuller</option>
<option>Janet White</option>
<option>Nancy Leverling</option>
<option>Robert Buchanan</option>
<option>Margaret Buchanan</option>
<option>Andrew Fuller</option>
<option>Anne Davolio</option>
<option>Andrew Suyama</option>
<option>Nige Buchanan</option>
<option>Laura Fuller</option>
</select>
JavaScript:
JavaScript：
// create MultiSelect from select HTML element
var required = $("#required").kendoMultiSelect().data("kendoMultiSelect");
Now in order to set the selected values for the select box, you just have to use the value() method. Here is the code: To set single value:
现在为了设置选择框的选定值，您只需使用 value() 方法。这是代码：设置单个值：
required.value("Laura Fuller")
To set multiple value:
要设置多个值：
required.value(["Laura Fuller","Laura Peacock"]);
Now to clear the values you just set empty string as the value
现在要清除您刚刚将空字符串设置为值的值
required.value("");
Now if you want to append any thing to already selected list, you can do what @OnaBai has show his snippet.
现在，如果您想将任何内容附加到已选择的列表中，您可以执行@OnaBai 显示的代码段。
That's all it is there to the widget :)
这就是小部件的全部内容:)
Hope this was useful.
希望这是有用的。
回答by Rodney
Ok I struggled with is even after I had the answer. My Kendo Grid had over 6,000 items to select from. It was working most of the time. It was just when I updated the selection it was causing me issues.
好吧，即使在我得到答案之后，我也很挣扎。我的剑道网格有 6,000 多个项目可供选择。它大部分时间都在工作。就在我更新选择时，它给我带来了问题。
The following code resolved my issue:
以下代码解决了我的问题：
// Remove previous selected Filters. (This was undocumented method. I got from Kendo)
multiSelect.dataSource.filter({});
// Set the new filters
multiSelect.value(newlySelectedFilters);
