KendoUI系列：DropDownList

libingql發表於2014-06-05
UI

　　1、基本使用

　　1>、建立Input

<input id="dropDownList" />
<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>
<script type="text/javascript">
    $(function () {
        var data = [
            { text: "Black", value: "1" },
            { text: "Orange", value: "2" },
            { text: "White", value: "3" }
        ];

        $("#dropDownList").kendoDropDownList({
            dataTextField: "text",
            dataValueField: "value",
            dataSource: data,
            index: 0 // 當前預設選中項，索引從0開始。
        });
    });
</script>

　　效果：

　　設定初始化時選中項：

var color = $("#dropDownList").data("kendoDropDownList");
color.select(1); // 設定初始化時選中項，索引從0開始。

　　獲取當前選中項：

$("#dropDownList").val();

　　或者

var color = $("#dropDownList").data("kendoDropDownList");
color.value();

　　獲取當前選中項的Text：

var color = $("#dropDownList").data("kendoDropDownList");
color.text();
<script type="text/javascript">
    $(function () {
        $.getJSON("/Province/GetProvinceList", function (data) {
            $("#txtAutoComplete").kendoDropDownList({
                dataTextField: "ProvinceName",
                dataValueField: "ProvinceID",
                dataSource: data
            });
        });
    });
</script>

　　2>、建立select

<select id="dropDownList">
    <option value="1">Black</option>
    <option value="2">Orange</option>
    <option value="3">White</option>
</select>
<script type="text/javascript">
    $(function () {
        $("#dropDownList").kendoDropDownList();
    });
</script>

 　　2、繫結遠端資料

<input id="province" />
<script type="text/javascript">
    $(function () {
        $("#province").kendoDropDownList({
　　　　　　  optionLabel: "--請選擇省份--",
            dataTextField: "ProvinceName",
            dataValueField: "ProvinceID",
            dataSource: {
                transport: {
                    read: {
                        dataType: "json",
                        url: "/DropDownList/GetProvinceList"
                    }
                }
            }
        });
    });
</script>

　　json的資料格式：

[{"ProvinceID":1,"ProvinceNo":"110000","ProvinceName":"北京市"},{"ProvinceID":2,"ProvinceNo":"120000","ProvinceName":"天津市"},{"ProvinceID":3,"ProvinceNo":"130000","ProvinceName":"河北省"},{"ProvinceID":4,"ProvinceNo":"140000","ProvinceName":"山西省"},{"ProvinceID":5,"ProvinceNo":"150000","ProvinceName":"內蒙古"},{"ProvinceID":6,"ProvinceNo":"210000","ProvinceName":"遼寧省"},{"ProvinceID":7,"ProvinceNo":"220000","ProvinceName":"吉林省"},{"ProvinceID":8,"ProvinceNo":"230000","ProvinceName":"黑龍江"},{"ProvinceID":9,"ProvinceNo":"310000","ProvinceName":"上海市"},{"ProvinceID":10,"ProvinceNo":"320000","ProvinceName":"江蘇省"},{"ProvinceID":11,"ProvinceNo":"330000","ProvinceName":"浙江省"},{"ProvinceID":12,"ProvinceNo":"340000","ProvinceName":"安徽省"},{"ProvinceID":13,"ProvinceNo":"350000","ProvinceName":"福建省"},{"ProvinceID":14,"ProvinceNo":"360000","ProvinceName":"江西省"},{"ProvinceID":15,"ProvinceNo":"370000","ProvinceName":"山東省"},{"ProvinceID":16,"ProvinceNo":"410000","ProvinceName":"河南省"},{"ProvinceID":17,"ProvinceNo":"420000","ProvinceName":"湖北省"},{"ProvinceID":18,"ProvinceNo":"430000","ProvinceName":"湖南省"},{"ProvinceID":19,"ProvinceNo":"440000","ProvinceName":"廣東省"},{"ProvinceID":20,"ProvinceNo":"450000","ProvinceName":"廣  西"},{"ProvinceID":21,"ProvinceNo":"460000","ProvinceName":"海南省"},{"ProvinceID":22,"ProvinceNo":"500000","ProvinceName":"重慶市"},{"ProvinceID":23,"ProvinceNo":"510000","ProvinceName":"四川省"},{"ProvinceID":24,"ProvinceNo":"520000","ProvinceName":"貴州省"},{"ProvinceID":25,"ProvinceNo":"530000","ProvinceName":"雲南省"},{"ProvinceID":26,"ProvinceNo":"540000","ProvinceName":"西  藏"},{"ProvinceID":27,"ProvinceNo":"610000","ProvinceName":"陝西省"},{"ProvinceID":28,"ProvinceNo":"620000","ProvinceName":"甘肅省"},{"ProvinceID":29,"ProvinceNo":"630000","ProvinceName":"青海省"},{"ProvinceID":30,"ProvinceNo":"640000","ProvinceName":"寧  夏"},{"ProvinceID":31,"ProvinceNo":"650000","ProvinceName":"新  疆"},{"ProvinceID":32,"ProvinceNo":"710000","ProvinceName":"臺灣省"},{"ProvinceID":33,"ProvinceNo":"810000","ProvinceName":"香  港"},{"ProvinceID":34,"ProvinceNo":"820000","ProvinceName":"澳  門"}]

　　效果：

　　設定載入之後選中項：

<script type="text/javascript">
    $(function () {
        $("#dropDownList").kendoDropDownList({
            autoBind: false,
            optionLabel: "--請選擇省份--",
            dataTextField: "ProvinceName",
            dataValueField: "ProvinceID",
            dataSource: {
                transport: {
                    read: {
                        dataType: "json",
                        url: "/Province/GetProvinceList"
                    }
                }
            },
            value: "350000",
            text: "福建省"
        });
    });
</script>

　　3、事件

<div class="demo-section k-header">
    <h4 class="title">DropDownList</h4>
    <input id="dropdownlist" />
</div>
<div class="box">
    <h4>Console log</h4>
    <div class="console"></div>
</div>
<script type="text/javascript">
    $(function () {
        function onOpen() {
            $(".console").append("event: open<br/>");
        };

        function onClose() {
            $(".console").append("event: close<br/>");
        };

        function onChange() {
            $(".console").append("event: change<br/>");
        };

        function onSelect(e) {
            var dataItem = this.dataItem(e.item.index());
            $(".console").append("event: select (" + dataItem.text + " : " + dataItem.value + ")<br/>");
        };

        var data = [
            { text: "Item1", value: "1" },
            { text: "Item2", value: "2" },
            { text: "Item3", value: "3" }
        ];

        $("#dropdownlist").kendoDropDownList({
            dataTextField: "text",
            dataValueField: "value",
            dataSource: data,
            select: onSelect,
            change: onChange,
            close: onClose,
            open: onOpen
        });
    });
</script>

　　4、聯動

<input id="province" />
<input id="city" />
<script type="text/javascript">
    $(function () {
        $("#province").kendoDropDownList({
            optionLabel: "--請選擇省份--",
            dataTextField: "ProvinceName",
            dataValueField: "ProvinceID",
            dataSource: {
                transport: {
                    read: {
                        dataType: "json",
                        url: "/DropDownList/GetProvinceList"
                    }
                }
            },
            change: onChange
        });
        $("#city").kendoDropDownList({
            optionLabel: "--請選擇城市--"
        });
    });
    function onChange() {
        $("#city").kendoDropDownList({
            optionLabel: "--請選擇城市--",
            dataTextField: "CityName",
            dataValueField: "CityID",
            dataSource: {
                transport: {
                    read: {
                        dataType: "json",
                        url: "/DropDownList/GetCityListByProvinceID",
                        data: { provinceID: $("#province").data("kendoDropDownList").value() }
                    }
                }
            }
        });
    }
</script>

　　效果預覽：

　　5、參考資料

　　http://demos.telerik.com/kendo-ui/dropdownlist/index

相關文章