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、参考资料