DropDownList下拉菜单

其他 2021-03-03 23:34:47 阅读次数: 0

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

扫描二维码关注公众号，回复： 12647992 查看本文章

默认：""

说明：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。 

  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());
            }
        });

猜你喜欢

转载自blog.csdn.net/baiduwenku112/article/details/109524871
今日推荐
周排行
教你如何约女孩子的方式去理解（TCP三次握手与四次挥手）
android按压背景
【量化小讲堂-Python&amp;Pandas系列10】如何判断一个策略的好坏？(附代码)
编程题：利用链表实现栈
盘点47条 Allegro 使用技巧，你都知道吗？
在VMware Workstation中安装CentOS
二叉树的实现
cmake安装jsoncpp
ReactNative开发城市列表页
最全前端学习资源
每日归档
更多
2025-03-20(0)
2025-03-19(0)
2025-03-18(0)
2025-03-17(0)
2025-03-16(0)
2025-03-15(0)
2025-03-14(0)
2025-03-13(0)
2025-03-12(0)
2025-03-11(0)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022