Kendo UI下拉列表教程和实例

DropDown UI组件是一个下拉菜单，用户可以从元素的列表中选择一个元素。当用户选择一个元素时，下拉状态被设置为该元素的值
Kendo提供了漂亮的下拉UI元素。Kendo UI具有丰富的用户体验，下面的例子是基于kendo UI的JQuery框架。

Kendo支持与PHP、angular和JSP技术的集成。并且Kendo Dropdown MVC支持也可以与asp.net框架集成。

下拉列表需要的文件

请从kendo网站下载所需的js文件。Kendo ui下拉列表通过包括这些文件来工作。包括单独的kendo.dropdownlist.min.js文件或包括kendo.all.min.js，其中包括所有kendo widget组件。

Kendo UI Dropdownlist基本例子

下拉式部件可以用很多方式初始化，我将向你展示常用的方式。
1.Jquery Dropdownlist 示例
用id声明输入元素，在jquery文档准备中，可以初始化下拉组件

 `  
  
    Kendo UI Dropdown List with text and value example  
      
      
`

$("#dropdownlistexampleone").kendoDropDownList({ dataTextField: "text", dataValueField: "value", dataSource: { data: data } });

2\. **create a normal dropdown as per HTML specification**  
  

`

kendoDropDownList  called once the DOM object is ready  
  

## 3\. Datasource Ajax example to bind the remote data

  
In applications, there are the cases where we need to attach the data returned from rest apis.  The data format can be json or jsonp format.  
To bind the remote data, Kendo UI framework provides Datasource object.  

```javascript
 `$("#id of html element").kendoDropDownList({  
     dataTextField: "name",  
     dataValueField: "id",  
     dataSource: {  
         transport: {  
             read: {  
                 dataType: "json",  
                 url: "REST API End Point,  
             }  
         }  
     }  
 });`  

页脚模板将显示在所显示的下拉列表的页脚上

 `  
  
      
        Kendo UI Dropdown List with text and value example  
          
          
      
  
`  

$("#dropdownlistexampleone").kendoDropDownList({ footerTemplate: $("#footerTemplate").html(), dataTextField: "text", dataValueField: "value", dataSource: { data: data } });

and output is as per below screenshot






   
        
    


  
  

## 5.Kendo UI Dropdown list search items example

**filter:contains** an option to search the items  
```html 
   
          
            Kendo UI Dropdown List Search items  
                example  
              
          
      

("#dropdownlistexampleone").kendoDropDownList({ footerTemplate: ("#footerTemplate") .html(),
dataTextField:"text",
dataValueField:"value",
dataSource:{
data: data
},
filter:"包含",
});`

and output is as per below screenshot  






   
        
    

That's my understanding on **kendo ui dropdownlist**