kendoUI系列教程之DropDownList下拉菜单

DropDownList其实就是select，只有下拉选择。可以把现有的select或者input渲染成下拉菜单：

原码 打印 关于

1. <input id="color" value="1" />  
2. <select id="size">  
3.     <option>S - 6 3/4"</option>  
4.     <option>M - 7 1/4"</option>  
5.     <option>L - 7 1/8"</option>  
6.     <option>XL - 7 5/8"</option>  
7. </select>  
8. <script>  
9.     $(document).ready(function() {  
10.         var data = [  
11.             { text: "Black", value: "1" },  
12.             { text: "Orange", value: "2" },  
13.             { text: "Grey", value: "3" }  
14.         ];  
15.         $("#color").kendoDropDownList({  
16.             dataTextField: "text",  
17.             dataValueField: "value",  
18.             dataSource: data,  
19.             index: 0  
20.         });  
21.         $("#size").kendoDropDownList();  
22.     });  
23. </script>  

Configuration配置项

1、动画 animation

类型：Object

说明：配置打开或者关闭下拉列表的特效。如果设值为false，打开或者关闭列表时将无动画。

原码 打印 关于

1. <input id="dropdownlist" />  
2. <script>  
3. $("#dropdownlist").kendoDropDownList({  
4.   animation: {  
5.    close: {  
6.      effects: "fadeOut zoom:out",  
7.      duration: 300  
8.    },  
9.    open: {  
10.      effects: "fadeIn zoom:in",  
11.      duration: 300  
12.    }  
13.   }  
14. });  

2、自动绑定数据 autoBind

类型：Boolean
默认：true
说明：初始化时是否自动绑定到数据源。

原码 打印 关于

1. <input id="dropdownlist" />  
2. <script>  
3. $("#dropdownlist").kendoDropDownList({  
4.     autoBind: false  
5. });  
6. </script>  

3、上级关联 cascadeForm

类型：String
说明：指定本下拉框的上级关联是谁。这在制作类似省市县联动菜单时非常必要。

原码 打印 关于

1. <input id="parent" />  
2. <input id="child" />  
3. <script>  
4. $("#parent").kendoDropDownList({  
5.     dataTextField: "parentName",  
6.     dataValueField: "parentId",  
7.     dataSource: [  
8.         { parentName: "Parent1", parentId: 1 },  
9.         { parentName: "Parent2", parentId: 2 }  
10.     ]  
11. });  
12.   
13. $("#child").kendoDropDownList({  
14.     cascadeFrom: "parent",//关联id=parent 的下拉框  
15.     dataTextField: "childName",  
16.     dataValueField: "childId",  
17.     dataSource: [  
18.         { childName: "Child1", childId: 1, parentId: 1 },  
19.         { childName: "Child2", childId: 2, parentId: 2 },  
20.         { childName: "Child3", childId: 3, parentId: 1 },  
21.         { childName: "Child4", childId: 4, parentId: 2 }  
22.     ]  
23. });  
24. </script>  

4、数据源 dataSource

类型：Object|Array|kendo.data.DataSource

说明：指定下拉列表的数据来源，可以是对象或者数据，或者是kendo的数据源。

原码 打印 关于

1. <script>  
2. //数组型数据源  
3. $("#id").kendoDropDownList<span style="font-family: arial, helvetica, sans-serif, ����;">({</span>  
4.   dataSource: {  
5.     data: ["One", "Two"]  
6.   }  
7. });  
8. //kendo的数据源  
9. var dataSource = new kendo.data.DataSource({  
10.   transport: {  
11.     read: {  
12.       url: "http://demos.kendoui.com/service/products",  
13.       dataType: "jsonp"  
14.     }  
15.   }  
16. });  
17. $("#id").kendoDropDownList<span style="font-family: arial, helvetica, sans-serif, ����;">({</span>  
18.   dataSource: dataSource,  
19.   dataTextField: "ProductName",  
20.   dataValueField: "ProductID"  
21. });  
22. </script>  

5、文本字段 dataTextField

类型：String

默认：""

说明：DropDownList下拉菜单的option需要text与value。必须指定。

6、值字段 dataValueField

类型：String

默认：""

说明：DropDownList下拉菜单t的option需要text与value。如果没有指定自动获取dataTextField。

原码 打印 关于

1. <input id="dropdownlist" />  
2. <script>  
3. $("#dropdownlist").kendoDropDownList({  
4.     dataSource: [{  
5.         { Name: "Parent1", Id: 1 },  
6.         { Name: "Parent2", Id: 2 }  
7.     }]  
8.     dataTextField: "Name",  
9.     dataValueField: "Id"  
10. });  
11. </script>  

7、延时显示时间 delay

类型：Number

默认：200

说明：当用户清除搜索文本之后下拉列表消除的时间，单位为毫秒。

原码 打印 关于

1. <input id="dropdownlist" />  
2. <script>  
3. $("#dropdownlist").kendoDropDownList({  
4.   delay: 500  
5. });  
6. </script>  

8、是否可用 enable

类型：Boolean

默认：true

说明：设置下拉菜单是否可用。

原码 打印 关于

1. <input id="dropdownlist" />  
2. <script>  
3. $("#dropdownlist").kendoDropDownList({  
4.   enable: false  
5. });  
6. </script>  

9、过滤规则忽略大小写 ignoreCase

类型：Boolean

默认：true

说明：过滤搜索时是否忽略大小写，设置为false将区分大小写过滤搜索。

原码 打印 关于

1. <input id="dropdownlist" />  
2. <script>  
3. $("#dropdownlist").kendoDropDownList({  
4.   ignoreCase: false  
5. });  
6. </script>  

10、下拉列表高度 height

类型：Number

默认：200

说明：定义下拉列表的高度，单位是像素(px)。

原码 打印 关于

1. <input id="dropdownlist" />  
2. <script>  
3. $("#dropdownlist").kendoDropDownList({  
4.   height: 500  
5. });  
6. </script>  

11、默认索引值 index

类型：Number

默认：0

 

说明：初始化时自动设值的索引值，数组是从0开始的。

原码 打印 关于

1. <input id="dropdownlist" />  
2. <script>  
3.     var items = [{ text: "Item 1", value: "1" }, { text: "Item 2", value: "2" }];  
4.     $("#dropdownlist").kendoDropDownList({  
5.         dataTextField: "text",  
6.         dataValueField: "value",  
7.         dataSource: items,  
8.         index: 1  
9.     });  
10. </script>  

12、optionLabel

类型：String | Object

默认：""

说明：下拉菜单默认选项，默认选项数据必须与数据源格式一致。如果要求必须含有dataValueField 和 dataTextField，默认选项值就必须是Object。

原码 打印 关于

1. <input id="dropdownlist" />  
2. <script>  
3. $("#dropdownlist").kendoDropDownList({  
4.     dataSource: ["Apples", "Oranges"],  
5.     optionLabel: "Select a fruit..." //此情况可以是文本，表示值与文本一样  
6. });  
7. </script>  

原码 打印 关于

1. <input id="dropdownlist" />  
2. <script>  
3. $("#dropdownlist").kendoDropDownList({  
4.     dataSource: [  
5.         { productName: "Product 1", productId: 1 },  
6.         { productName: "Product 2", productId: 2 }  
7.     ],  
8.     dataTextField: "productName",  
9.     dataValueField: "productId",  
10.     optionLabel: {  
11.         productName: "Select a product...",  
12.         productId: ""  
13.     }//因数据源是对象，所以默认选项也必须是对象  
14. });  
15. </script>  

13、忽略大小写 ignoreCase

类型：Boolean

默认：true

说明：过滤时是否忽略大小写，默认是忽略。

原码 打印 关于

1. <input id="<span style="font-family: arial, helvetica, sans-serif, ����;">dropdownlist</span><span style="font-family: arial, helvetica, sans-serif, ����;">" /></span>  
2. <script>  
3.     $("#<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>  
4.         ignoreCase: false  
5.     });  
6. </script>  

14、template

类型：String|Function

说明：自定义下拉列表模板，比如生成带相片的名单。

原码 打印 关于

1. <input id="dropdownlist" />  
2. <script id="template" type="text/x-kendo-template">  
3.   <span>  
4.     <img src="/img/#: id #.png" alt="#: name #" />  
5.     #: name #  
6.   </span>  
7. </script>  
8. <script>  
9. $("#dropdownlist").kendoDropDownList({  
10.   dataSource: [  
11.     { id: 1, name: "Apples" },  
12.     { id: 2, name: "Oranges" }  
13.   ],  
14.   dataTextField: "name",  
15.   dataValueField: "id",  
16.   template: kendo.template($("#template").html())  
17. });  
18. </script>  

原码 打印 关于

1. <input id="dropdownlist" />  
2. <script>  
3. $("#dropdownlist").kendoDropDownList({  
4.   dataSource: [  
5.     { id: 1, name: "Apples" },  
6.     { id: 2, name: "Oranges" }  
7.   ],  
8.   dataTextField: "name",  
9.   dataValueField: "id",  
10.   template: '<span><img src="/img/#: id #.png" alt="#: name #" />#: name #</span>'  
11. });  
12. </script>  

16、绑定原始值  valuePrimitive

类型：Boolean

默认：false

说明：当为true时输入框获取dataValueField对应的值，为false时获取dataTextField对应的值。(感谢：Yuliyana Kirova)

原码 打印 关于

1. <input id="dropdownlist" data-bind="value: selectedProductId, source: products" />  
2.   
3. <script>  
4. $("#dropdownlist").kendoDropDownList({  
5.   valuePrimitive: true,  
6.   dataTextField: "name",  
7.   dataValueField: "id"  
8. });  
9. var viewModel = kendo.observable({  
10.   selectedProductId: null,  
11.   products: [  
12.     { id: 1, name: "Coffee" },  
13.     { id: 2, name: "Tea" },  
14.     { id: 3, name: "Juice" }  
15.   ]  
16. });  
17.   
18. kendo.bind($("#dropdownlist"), viewModel);  
19. </script>  

18、默认文本 Text

类型：String

默认：""

说明：当自动绑定数据为false才可设置默认文本。

原码 打印 关于

1. <input id="dropdownlist" />  
2. <script>  
3. $("#dropdownlist").kendoDropDownList({  
4.      autoBind: false,  
5.      text: "Chai"  
6. });  
7. </script>  

19、设置值 value

类型：String

默认：""

说明：设置默认值。

原码 打印 关于

1. <input id="dropdownlist" />  
2. <script>  
3. $("#dropdownlist").kendoDropDownList({  
4.      dataSource: ["Item1", "Item2"],  
5.      value: "Item1"  
6. });  
7. </script>  

Fields 其他属性

1、数据源操作 dataSource

类型：kendo.data.DataSource

说明：通过它可操作数据项。

原码 打印 关于

1. <input id="dropdownlist" />  
2. <script>  
3. $("#dropdownlist").kendoDropDownList({  
4.   dataSource: [  
5.     { name: "Apples" },  
6.     { name: "Oranges" }  
7.   ],  
8.   dataTextField: "name",  
9.   dataValueField: "name"  
10. });  
11. var dropdownlist = $("#dropdownlist").data("kendoDropDownList");  
12. dropdownlist.dataSource.add({ name: "Appricot" });  
13. dropdownlist.search("A");  
14. </script>  

2、选项集 options

类型：Object

说明：获取选项集对象。

原码 打印 关于

1. <input id="dropdownlist" />  
2. <script>  
3. $("#dropdownlist").kendoDropDownList();  
4. var dropdownlist = $("#dropdownlist").data("kendoDropDownList");  
5. var options = dropdownlist.options;  
6. <script>  

3、列表集 list

类型：JQuery

说明：获取下拉列表jquery对象。

原码 打印 关于

1. <input id="dropdownlist" />  
2. <script>  
3. $("#dropdownlist").kendoDropDownList();  
4. var dropdownlist = $("#dropdownlist").data("kendoDropDownList");  
5. var list = dropdownlist.list;  
6. <script>  

4、列表 ul

类型：JQuery

说明：获取下拉列表父框架ul的jquery对象。

原码 打印 关于

1. <input id="dropdownlist" />  
2. <script>  
3. $("#dropdownlist").kendoDropDownList();  
4. var dropdownlist = $("#dropdownlist").data("kendoDropDownList");  
5. var ul = dropdownlist.ul;  
6. <script>  

5、输入框文件对象 span

类型：JQuery

说明：显示被选择文本的jquery对象。

原码 打印 关于

1. <input id="dropdownlist" />  
2. <script>  
3. $("#dropdownlist").kendoDropDownList();  
4. var dropdownlist = $("#dropdownlist").data("kendoDropDownList");  
5. var span = dropdownlist.span;  
6. span.css("background-color", "red");  
7. <script>  

Motheds 方法

原码 打印 关于

1. <input id="dropdownlist" />  
2. <script>  
3. $("#dropdownlist").kendoDropDownList({  
4.   dataSource: [  
5.     { id: 1, name: "Apples" },  
6.     { id: 2, name: "Oranges" }  
7.   ],  
8.   dataTextField: "name",  
9.   dataValueField: "id",  
10.   index: 1  
11. });  
12. var dataSource = new kendo.data.DataSource({  
13.   data: [ "Bananas", "Cherries" ]  
14. });  
15. var dropdownlist = $("#dropdownlist").data("kendoDropDownList");  
16. dropdownlist.search("A");//搜索"A"将弹出下拉菜单Apples  
17. dropdownlist.close();//关闭下拉菜单  
18. dropdownlist.open();//打开下拉菜单  
19. dropdownlist.toggle();//自动切换打开还是关闭下拉菜单  
20. dropdownlist.readonly(true);//设为只读，将不能开下拉菜单  
21. var dataItem = dropdownlist.dataItem();//获取已经选择项的Item对象  
22. var dataItem = dropdownlist.dataItem(0);//获取指定下标的Item对象  
23. dropdownlist.focus();//自动获取焦点  
24. dropdownlist.setDataSource(dataSource);//设置数据源  
25. dropdownlist.refresh();//刷新控件  
26. dropdownlist.select(dropdownlist.ul.children().eq(0));//选择下拉菜单，支持几种形式  
27. dropdownlist.select(1);  
28. dropdownlist.select(function(dataItem) {  
29.     return dataItem.text === "Apples";  
30. });  
31. var selectedIndex = dropdownlist.select();//获取已经选择的下标  
32. dropdownlist.text("Apples");//设置下拉菜单文本，将自动选择对应的Item  
33. dropdownlist.value("Oranges");//设置下拉菜单的值，如果不存在此值将设置不成功  
34. dropdownlist.destroy(); //销毁下拉菜单  
35. </script>  

Events 事件

原码 打印 关于

1. <input id="dropdownlist" />  
2. <script>  
3. $("#dropdownlist").kendoDropDownList({  
4.   change: function(e) {  
5.     var value = this.value();//打开下拉菜单时触发  
6.   },  
7.   close: function(e) {  
8.     // 关闭下拉菜单时触发  
9.   },  
10.   open: function(e) {  
11.     // 打开下拉菜单时触发  
12.   },  
13.   dataBound: function(e) {  
14.       // 绑定数据时触发  
15.   },  
16.   select: function(e) {  
17.     var item = e.item;  
18.     var text = item.text();  
19.     // 选择下拉菜单时触发  
20.   },cascade: function() {  
21.     // Handle the event  
22.   }  
23. });  
24. </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());
            }
        });