DropDownList其实就是select，只有下拉选择。可以把现有的select或者input渲染成下拉菜单：
-
<input id=
“color”
value=
“1”
/>
-
<select id=
“size”
>
-
<option>S – 6 3/4″</option>
-
<option>M – 7 1/4″</option>
-
<option>L – 7 1/8″</option>
-
<option>XL – 7 5/8″</option>
-
</select>
-
<script>
-
$(document).ready(
function
() {
-
var
data = [
-
{ text:
“Black”
, value:
“1”
},
-
{ text:
“Orange”
, value:
“2”
},
-
{ text:
“Grey”
, value:
“3”
}
-
];
-
$(
“#color”
).kendoDropDownList({
-
dataTextField:
“text”
,
-
dataValueField:
“value”
,
-
dataSource: data,
-
index: 0
-
});
-
$(
“#size”
).kendoDropDownList();
-
});
-
</script>
Configuration配置项
1、动画 animation
类型：
Object
说明：
配置打开或者关闭下拉列表的特效。如果设值为false，打开或者关闭列表时将无动画。
-
<input id=
“dropdownlist”
/>
-
<script>
-
$(
“#dropdownlist”
).kendoDropDownList({
-
animation: {
-
close: {
-
effects:
“fadeOut zoom:out”
,
-
duration: 300
-
},
-
open: {
-
effects:
“fadeIn zoom:in”
,
-
duration: 300
-
}
-
}
-
});
2、自动绑定数据 autoBind
类型：
Boolean
默认：
true
说明：
初始化时是否自动绑定到数据源。
-
<input id=
“dropdownlist”
/>
-
<script>
-
$(
“#dropdownlist”
).kendoDropDownList({
-
autoBind:
false
-
});
-
</script>
3、上级关联 cascadeForm
类型：
String
说明：
指定本下拉框的上级关联是谁。这在制作类似省市县联动菜单时非常必要。
-
<input id=
“parent”
/>
-
<input id=
“child”
/>
-
<script>
-
$(
“#parent”
).kendoDropDownList({
-
dataTextField:
“parentName”
,
-
dataValueField:
“parentId”
,
-
dataSource: [
-
{ parentName:
“Parent1”
, parentId: 1 },
-
{ parentName:
“Parent2”
, parentId: 2 }
-
]
-
});
-
-
$(
“#child”
).kendoDropDownList({
-
cascadeFrom:
“parent”
,
//关联id=parent 的下拉框
-
dataTextField:
“childName”
,
-
dataValueField:
“childId”
,
-
dataSource: [
-
{ childName:
“Child1”
, childId: 1, parentId: 1 },
-
{ childName:
“Child2”
, childId: 2, parentId: 2 },
-
{ childName:
“Child3”
, childId: 3, parentId: 1 },
-
{ childName:
“Child4”
, childId: 4, parentId: 2 }
-
]
-
});
-
</script>
4、数据源 dataSource
类型：
Object|Array|kendo.data.DataSource
说明：
指定下拉列表的数据来源，可以是对象或者数据，或者是kendo的数据源。
-
<script>
-
//数组型数据源
-
$(
“#id”
).kendoDropDownList<span style=
“font-family: arial, helvetica, sans-serif, ����;”
>({</span>
-
dataSource: {
-
data: [
“One”
,
“Two”
]
-
}
-
});
-
//kendo的数据源
-
var
dataSource =
new
kendo.data.DataSource({
-
transport: {
-
read: {
-
url:
“http://demos.kendoui.com/service/products”
,
-
dataType:
“jsonp”
-
}
-
}
-
});
-
$(
“#id”
).kendoDropDownList<span style=
“font-family: arial, helvetica, sans-serif, ����;”
>({</span>
-
dataSource: dataSource,
-
dataTextField:
“ProductName”
,
-
dataValueField:
“ProductID”
-
});
-
</script>
5、文本字段 dataTextField
类型：
String
默认：
“”
说明：
DropDownList下拉菜单的option需要text与value。必须指定。
6、值字段 dataValueField
类型：
String
默认：
“”
说明：
DropDownList下拉菜单t的option需要text与value。如果没有指定自动获取dataTextField。
-
<input id=
“dropdownlist”
/>
-
<script>
-
$(
“#dropdownlist”
).kendoDropDownList({
-
dataSource: [{
-
{ Name:
“Parent1”
, Id: 1 },
-
{ Name:
“Parent2”
, Id: 2 }
-
}]
-
dataTextField:
“Name”
,
-
dataValueField:
“Id”
-
});
-
</script>
7、延时显示时间 delay
类型：
Number
默认：
200
说明：
当用户清除搜索文本之后下拉列表消除的时间，单位为毫秒。
-
<input id=
“dropdownlist”
/>
-
<script>
-
$(
“#dropdownlist”
).kendoDropDownList({
-
delay: 500
-
});
-
</script>
8、是否可用 enable
类型：
Boolean
默认：
true
说明：
设置下拉菜单是否可用。
-
<input id=
“dropdownlist”
/>
-
<script>
-
$(
“#dropdownlist”
).kendoDropDownList({
-
enable:
false
-
});
-
</script>
9、过滤规则忽略大小写 ignoreCase
类型：
Boolean
默认：
true
说明：
过滤搜索时是否忽略大小写，设置为false将区分大小写过滤搜索。
-
<input id=
“dropdownlist”
/>
-
<script>
-
$(
“#dropdownlist”
).kendoDropDownList({
-
ignoreCase:
false
-
});
-
</script>
10、下拉列表高度 height
类型：
Number
默认：
200
说明：
定义下拉列表的高度，单位是像素(px)。
-
<input id=
“dropdownlist”
/>
-
<script>
-
$(
“#dropdownlist”
).kendoDropDownList({
-
height: 500
-
});
-
</script>
11、默认索引值 index
类型：
Number
默认：
0
说明：
初始化时自动设值的索引值，数组是从0开始的。
-
<input id=
“dropdownlist”
/>
-
<script>
-
var
items = [{ text:
“Item 1”
, value:
“1”
}, { text:
“Item 2”
, value:
“2”
}];
-
$(
“#dropdownlist”
).kendoDropDownList({
-
dataTextField:
“text”
,
-
dataValueField:
“value”
,
-
dataSource: items,
-
index: 1
-
});
-
</script>
12、optionLabel
类型：
String | Object
默认：
“”
说明：
下拉菜单默认选项，默认选项数据必须与数据源格式一致。如果要求必须含有dataValueField 和 dataTextField，默认选项值就必须是Object。
-
<input id=
“dropdownlist”
/>
-
<script>
-
$(
“#dropdownlist”
).kendoDropDownList({
-
dataSource: [
“Apples”
,
“Oranges”
],
-
optionLabel:
“Select a fruit…”
//此情况可以是文本，表示值与文本一样
-
});
-
</script>
-
<input id=
“dropdownlist”
/>
-
<script>
-
$(
“#dropdownlist”
).kendoDropDownList({
-
dataSource: [
-
{ productName:
“Product 1”
, productId: 1 },
-
{ productName:
“Product 2”
, productId: 2 }
-
],
-
dataTextField:
“productName”
,
-
dataValueField:
“productId”
,
-
optionLabel: {
-
productName:
“Select a product…”
,
-
productId:
“”
-
}
//因数据源是对象，所以默认选项也必须是对象
-
});
-
</script>
13、忽略大小写 ignoreCase
类型：
Boolean
默认：
true
说明：
过滤时是否忽略大小写，默认是忽略。
-
<input id=
“<span style=”
font-family: arial, helvetica, sans-serif, ����;
“>dropdownlist</span><span style=”
font-family: arial, helvetica, sans-serif, ����;
“>”
/></span>
-
<script>
-
$(
“#<span style=”
font-family: arial, helvetica, sans-serif, ����;
“>dropdownlist</span><span style=”
font-family: arial, helvetica, sans-serif, ����;
“>”
).</span><span style=
“font-family: arial, helvetica, sans-serif, ����;”
>kendoDropDownList</span><span style=
“font-family: arial, helvetica, sans-serif, ����;”
>({</span>
-
ignoreCase:
false
-
});
-
</script>
14、template
类型：
String|Function
说明：
自定义下拉列表模板，比如生成带相片的名单。
-
<input id=
“dropdownlist”
/>
-
<script id=
“template”
type=
“text/x-kendo-template”
>
-
<span>
-
<img src=
“/img/#: id #.png”
alt=
“#: name #”
/>
-
#: name #
-
</span>
-
</script>
-
<script>
-
$(
“#dropdownlist”
).kendoDropDownList({
-
dataSource: [
-
{ id: 1, name:
“Apples”
},
-
{ id: 2, name:
“Oranges”
}
-
],
-
dataTextField:
“name”
,
-
dataValueField:
“id”
,
-
template: kendo.template($(
“#template”
).html())
-
});
-
</script>
-
<input id=
“dropdownlist”
/>
-
<script>
-
$(
“#dropdownlist”
).kendoDropDownList({
-
dataSource: [
-
{ id: 1, name:
“Apples”
},
-
{ id: 2, name:
“Oranges”
}
-
],
-
dataTextField:
“name”
,
-
dataValueField:
“id”
,
-
template:
‘<span><img src=”/img/#: id #.png” alt=”#: name #” />#: name #</span>’
-
});
-
</script>
16、绑定原始值 valuePrimitive
类型：
Boolean
默认：
false
说明：
当为true时输入框获取dataValueField对应的值，为false时获取dataTextField对应的值。(感谢：Yuliyana Kirova)
-
<input id=
“dropdownlist”
data-bind=
“value: selectedProductId, source: products”
/>
-
-
<script>
-
$(
“#dropdownlist”
).kendoDropDownList({
-
valuePrimitive:
true
,
-
dataTextField:
“name”
,
-
dataValueField:
“id”
-
});
-
var
viewModel = kendo.observable({
-
selectedProductId:
null
,
-
products: [
-
{ id: 1, name:
“Coffee”
},
-
{ id: 2, name:
“Tea”
},
-
{ id: 3, name:
“Juice”
}
-
]
-
});
-
-
kendo.bind($(
“#dropdownlist”
), viewModel);
-
</script>
18、默认文本 Text
类型：
String
默认：
“”
说明：
当自动绑定数据为false才可设置默认文本。
-
<input id=
“dropdownlist”
/>
-
<script>
-
$(
“#dropdownlist”
).kendoDropDownList({
-
autoBind:
false
,
-
text:
“Chai”
-
});
-
</script>
19、设置值 value
类型：
String
默认：
“”
说明：
设置默认值。
-
<input id=
“dropdownlist”
/>
-
<script>
-
$(
“#dropdownlist”
).kendoDropDownList({
-
dataSource: [
“Item1”
,
“Item2”
],
-
value:
“Item1”
-
});
-
</script>
Fields 其他属性
1、数据源操作 dataSource
类型：
kendo.data.DataSource
说明：
通过它可操作数据项。
-
<input id=
“dropdownlist”
/>
-
<script>
-
$(
“#dropdownlist”
).kendoDropDownList({
-
dataSource: [
-
{ name:
“Apples”
},
-
{ name:
“Oranges”
}
-
],
-
dataTextField:
“name”
,
-
dataValueField:
“name”
-
});
-
var
dropdownlist = $(
“#dropdownlist”
).data(
“kendoDropDownList”
);
-
dropdownlist.dataSource.add({ name:
“Appricot”
});
-
dropdownlist.search(
“A”
);
-
</script>
2、选项集 options
类型：
Object
说明：
获取选项集对象。
-
<input id=
“dropdownlist”
/>
-
<script>
-
$(
“#dropdownlist”
).kendoDropDownList();
-
var
dropdownlist = $(
“#dropdownlist”
).data(
“kendoDropDownList”
);
-
var
options = dropdownlist.options;
-
<script>
3、列表集 list
类型：
JQuery
说明：
获取下拉列表jquery对象。
-
<input id=
“dropdownlist”
/>
-
<script>
-
$(
“#dropdownlist”
).kendoDropDownList();
-
var
dropdownlist = $(
“#dropdownlist”
).data(
“kendoDropDownList”
);
-
var
list = dropdownlist.list;
-
<script>
4、列表 ul
类型：
JQuery
说明：
获取下拉列表父框架ul的jquery对象。
-
<input id=
“dropdownlist”
/>
-
<script>
-
$(
“#dropdownlist”
).kendoDropDownList();
-
var
dropdownlist = $(
“#dropdownlist”
).data(
“kendoDropDownList”
);
-
var
ul = dropdownlist.ul;
-
<script>
5、输入框文件对象 span
类型：
JQuery
说明：
显示被选择文本的jquery对象。
-
<input id=
“dropdownlist”
/>
-
<script>
-
$(
“#dropdownlist”
).kendoDropDownList();
-
var
dropdownlist = $(
“#dropdownlist”
).data(
“kendoDropDownList”
);
-
var
span = dropdownlist.span;
-
span.css(
“background-color”
,
“red”
);
-
<script>
Motheds 方法
-
<input id=
“dropdownlist”
/>
-
<script>
-
$(
“#dropdownlist”
).kendoDropDownList({
-
dataSource: [
-
{ id: 1, name:
“Apples”
},
-
{ id: 2, name:
“Oranges”
}
-
],
-
dataTextField:
“name”
,
-
dataValueField:
“id”
,
-
index: 1
-
});
-
var
dataSource =
new
kendo.data.DataSource({
-
data: [
“Bananas”
,
“Cherries”
]
-
});
-
var
dropdownlist = $(
“#dropdownlist”
).data(
“kendoDropDownList”
);
-
dropdownlist.search(
“A”
);
//搜索”A”将弹出下拉菜单Apples
-
dropdownlist.close();
//关闭下拉菜单
-
dropdownlist.open();
//打开下拉菜单
-
dropdownlist.toggle();
//自动切换打开还是关闭下拉菜单
-
dropdownlist.readonly(
true
);
//设为只读，将不能开下拉菜单
-
var
dataItem = dropdownlist.dataItem();
//获取已经选择项的Item对象
-
var
dataItem = dropdownlist.dataItem(0);
//获取指定下标的Item对象
-
dropdownlist.focus();
//自动获取焦点
-
dropdownlist.setDataSource(dataSource);
//设置数据源
-
dropdownlist.refresh();
//刷新控件
-
dropdownlist.select(dropdownlist.ul.children().eq(0));
//选择下拉菜单，支持几种形式
-
dropdownlist.select(1);
-
dropdownlist.select(
function
(dataItem) {
-
return
dataItem.text ===
“Apples”
;
-
});
-
var
selectedIndex = dropdownlist.select();
//获取已经选择的下标
-
dropdownlist.text(
“Apples”
);
//设置下拉菜单文本，将自动选择对应的Item
-
dropdownlist.value(
“Oranges”
);
//设置下拉菜单的值，如果不存在此值将设置不成功
-
dropdownlist.destroy();
//销毁下拉菜单
-
</script>
Events 事件
-
<input id=
“dropdownlist”
/>
-
<script>
-
$(
“#dropdownlist”
).kendoDropDownList({
-
change:
function
(e) {
-
var
value =
this
.value();
//打开下拉菜单时触发
-
},
-
close:
function
(e) {
-
// 关闭下拉菜单时触发
-
},
-
open:
function
(e) {
-
// 打开下拉菜单时触发
-
},
-
dataBound:
function
(e) {
-
// 绑定数据时触发
-
},
-
select:
function
(e) {
-
var
item = e.item;
-
var
text = item.text();
-
// 选择下拉菜单时触发
-
},cascade:
function
() {
-
// Handle the event
-
}
-
});
-
</script>
例子
var JX_TYPE = $(“#aint0”);
JX_TYPE.kendoDropDownList({
dataTextField: “text”,//json返回的name
dataValueField: “value”,
dataSource: data,
value: “@Model.aint0”,
index:0,
change: onChange,
});
dept.kendoDropDownList({
cascadeFrom: “P_ORG_ID”,//父id
cascadeFromField: “PARENT_ID”,//子数据中的key名称
dataTextField: “NAME”,//json返回的name
dataValueField: “ID”,
value: “@Model.S_ORG_ID”,
index: 0,
dataSource: obj_dict_dept
});
org_id.kendoDropDownList({
dataTextField: “NAME”,//json返回的name
dataValueField: “ID”,
dataSource: obj_org_id,
change: function (e) {
so_change(this.value(), $(“#TITLE”).val());
}
});