项目最近属于第一阶段的中后期，dropdownlist用的也算不少，首先对它的基本用法做一个整理。
（插播一段：马未都的八字方针：自信坚强、认真宽容。马爷认为自信首先要拥有知识，然后要有勇气在公众面前表达。坚强是内心的感受。认真是所有成功者必备的素质。宽容别人在很多时候很大程度是善待自己。）
因为最近在整理电脑里随手记录的一些东西，上面的话是曾经记下来的，这里插播一下，也用来勉励自己不断成长！
一、基本使用方法介绍
官网链接地址 demo：
文档：
简单demo：供参考
//html//JS$("#transitionPerson").kendoDropDownList({ dataSource: [{ Id: "1", Name: "张三" }, { Id: "2", Name: "李四" }], //数据 dataTextField: "Name", //显示的下拉文本 dataValueField: "Id", //value值 optionLabel: "选择用户...",//下拉选择提示文字 filter: "contains",//搜索 noDataTemplate: '没有找到相关数据!', height: 300, autoWidth: true});
1、加载dataSource：
（1）local数据
dataSource: [{ Id: "1", Name: "张三" }, { Id: "2", Name: "李四" }], //数据 （2）remote数据
dataSource: { type: "odata", serverFiltering: true, transport: { read: { url: "//demos.telerik.com/kendo-ui/service/Northwind.svc/Products", } } }
（3）创建一个data，然后赋值的方式传值（data可以是local data，也可以是remote data）
var dataSource = new kendo.data.DataSource({ transport: { read: { url: "https://demos.telerik.com/kendo-ui/service/products", dataType: "jsonp" } }});
2、对数据源的操作
（1）设置data
var dropdownlist = $("#dropdownlist").data("kendoDropDownList");dropdownlist.setDataSource(dataSource);
（2）添加数据
var dropdownlist = $("#dropdownlist").data("kendoDropDownList");dropdownlist.dataSource.add({Id：“4”, Name: "Appricot" });
3、操作
（1）选中某一项
//方法1：通过Indexvar dropdownlist = $("#dropdownlist").data("kendoDropDownList");dropdownlist.select(0);//方法2：通过可选项的name（可根据需求修改方法）var dropdownlist = $("#dropdownlist").data("kendoDropDownList");dropdownlist.select(function(dataItem) { return dataItem.name === "Apples";}); （2）搜索XX
var dropdownlist = $("#dropdownlist").data("kendoDropDownList");dropdownlist.search("A"); （3）销毁dropdownlist
var dropdownlist = $("#dropdownlist").data("kendoDropDownList");dropdownlist.destroy(); 3、显示
（1）可否编辑，默认enable为true
//方法1：$("#dropdownlist").kendoDropDownList({ enable: false});//方法2var dropdownlist = $("#dropdownlist").data("kendoDropDownList");dropdownlist.enable(true); （2）只读
var dropdownlist = $("#dropdownlist").data("kendoDropDownList");// makes dropdownlist readonlydropdownlist.readonly(); （3）展开下拉选项
var dropdownlist = $("#dropdownlist").data("kendoDropDownList");dropdownlist.toggle(); （4）关闭下拉选项
dropdownlist.close();
4、取值
（1）取出text
$("#dropdownlist").data("kendoDropDownList").text(); （2）取出value
$("#dropdownlist").data("kendoDropDownList").value();
kendo官网文档对dropdownlist的说明还是很全面的，上面我写的那些官网上都是有的，此外还有很多的event等其他的方法，建议大家参考官网。
网址：
二、实际问题整理
先上一段代码：
$("#dropdownlist").kendoDropDownList({ dataSource: { transport: { read: { type: "post", url: "/Manage", dataType: "json" } }, schema: { model: { fields: { Code: { type: "string" } } } }, pageSize: 80, serverPaging: true, serverFiltering: true }, valueTemplate: '#:data.Name#', headerTemplate: ' ', template: '#= Code #' + '#= Name #
', dataTextField: "Code", dataValueField: "Id", filter: "startswith", optionLabel: "选择...", noDataTemplate: '没有找到相关数据!', height: 200, autoWidth: true }); 上面的demo是一个带有两列显示数据的可选项列表。
这里使用了template参数，自定义了下拉可选项的显示样式，这里在实际应用的时候需要自定义css显示样式。
官网也有类似的demo，大家可以参考。