如何在剑道多选上设置数据值? [英] How to set data values on Kendo Multi Select?

查看:32
本文介绍了如何在剑道多选上设置数据值?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我使用的是剑道多选。我想将选定的值加载到多选中。如何在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();
                    },
                });

推荐答案

可以使用value()方法设置值。

示例,给出以下HTML:

<a href="#" id="button" class="k-button">Select</a>
<input id='selectedFilters'>

和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"]);
});

如果您单击button,则多值input将获得:name1name2name6

编辑如果要添加到当前选定的值,请执行以下操作:

$("#button").on("click", function () {
    var selected = multiselect.value();
    var res = $.merge($.merge([], selected), ["value1", "value2", "value6"]);
    multiselect.value(res);
});

注意:由于某种原因,您无法重用selected数组来设置新值,因此您应该创建一个新数组。

检查其是否正在运行here

这篇关于如何在剑道多选上设置数据值?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆