KendoUI系列：MultiSelect

最新推荐文章于 2021-03-29 16:15:45 发布

转载最新推荐文章于 2021-03-29 16:15:45 发布 · 701 阅读

文章标签：

#json #javascript #ViewUI

本文将介绍如何在Web应用中使用Kendo UI MultiSelect组件进行多选操作，包括基本使用、加载远程数据及设置加载完成后选中项的方法，并提供详细示例代码。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

　　1、基本使用

　　1>、创建Input

<link href="@Url.Content("~/Content/kendo/2014.1.318/kendo.common.min.css")" rel="stylesheet" type="text/css" />
<link href="@Url.Content("~/Content/kendo/2014.1.318/kendo.default.min.css")" rel="stylesheet" type="text/css" />
<script src="@Url.Content("~/Scripts/kendo/2014.1.318/jquery.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/kendo/2014.1.318/kendo.web.min.js")" type="text/javascript"></script>

<input class="city" />

<script type="text/javascript">
    $(function () {
        $(".city").kendoMultiSelect({
            dataTextField: "text",
            dataValueField: "value",
            dataSource: [
                { text: "北京", value: "1" },
                { text: "上海", value: "2" },
                { text: "深圳", value: "3" },
                { text: "厦门", value: "4" }
            ]
        });
    });
</script>

　　效果预览：

　　获取选中项Value：

var city = $("#city").data("kendoMultiSelect");
city.value();

　　设置加载完成后选中项：

<script type="text/javascript">
    $(function () {
        $("#city").kendoMultiSelect({
            dataTextField: "text",
            dataValueField: "value",
            dataSource: [
                { text: "北京", value: "1" },
                { text: "上海", value: "2" },
                { text: "深圳", value: "3" },
                { text: "厦门", value: "4" }
            ],
            value: [
                { text: "厦门", value: "4" },
                { text: "深圳", value: "3" }
            ]
        });
    });
</script>

<script type="text/javascript">
    $(function () {
        var dataSource = new kendo.data.DataSource({
            data: [{
                text: "北京",
                value: "1"
            }, {
                text: "上海",
                value: "2"
            }, {
                text: "深圳",
                value: "3"
            }, {
                text: "厦门",
                value: "4"
            }]
        });

        $("#city").kendoMultiSelect({
            dataTextField: "text",
            dataValueField: "value",
            dataSource: dataSource,
            value: [
                { text: "厦门", value: "4" },
                { text: "深圳", value: "3" }
            ]
        });
    });
</script>

　　2>、创建select

<select id="city" multiple="multiple" data-placeholder="Select Cities...">
    <option>北京</option>
    <option selected>上海</option>
    <option>深圳</option>
    <option selected>厦门</option>
</select>

<script type="text/javascript">
    $(function () {
        $("#city").kendoMultiSelect();
    });
</script>

　　2、加载远程数据

<input id="city" />

<script type="text/javascript">
    $(function () {
        var dataSource = new kendo.data.DataSource({
            transport: {
                read: {
                    url: "/Province/GetProvinceList",
                    dataType: "json"
                }
            }
        });

        $("#city").kendoMultiSelect({
            placeholder: "Select Cities...",
            dataTextField: "ProvinceName",
            dataValueField: "ProvinceID",
            autoBind: false,
            dataSource: dataSource
        });
    });
</script>
}