KendoUI系列：DropDownList
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、参考资料