項目最近屬於第一階段的中後期，dropdownlist用的也算不少，首先對它的基本用法做一個整理。

（插播一段：馬未都的八字方針：自信堅強、認真寬容。馬爺認為自信首先要擁有知識，然後要有勇氣在公眾面前表達。堅強是內心的感受。認真是所有成功者必備的素質。寬容別人在很多時候很大程度是善待自己。）

因為最近在整理電腦裏隨手記錄的一些東西，上面的話是曾經記下來的，這裏插播一下，也用來勉勵自己不斷成長！

一、基本使用方法介紹

官網鏈接地址 demo：https://demos.telerik.com/kendo-ui/dropdownlist/index

文檔：https://docs.telerik.com/kendo-ui/api/javascript/ui/dropdownlist

簡單demo：供參考

//html
<input type="text" id="transitionPerson">

//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：通過Index
var 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
});
//方法2
var dropdownlist = $("#dropdownlist").data("kendoDropDownList");
dropdownlist.enable(true);

（2）只讀

var dropdownlist = $("#dropdownlist").data("kendoDropDownList");

// makes dropdownlist readonly
dropdownlist.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等其他的方法，建議大家參考官網。

網址：https://docs.telerik.com/kendo-ui/api/javascript/ui/dropdownlist

二、實際問題整理

先上一段代碼：

$("#dropdownlist").kendoDropDownList({
        dataSource: {
            transport: {
                read: {
                    type: "post",
                    url: "/Manage",
                    dataType: "json"
                }
            },
            schema: {
                model: {
                    fields: {
                        Code: { type: "string" }
                    }
                }
            },
            pageSize: 80,
            serverPaging: true,
            serverFiltering: true
        },
        valueTemplate: ‘<span>#:data.Name#</span>‘,
        headerTemplate: ‘<div class="dropdown-header k-widget k-header">‘ +
                        ‘<span>編號</span>‘ +
                        ‘<span>名稱</span>‘ +
                        ‘</div>‘,
        template: ‘<span class="k-state-default" title="#= Code #">#= Code #</span>‘ +
                  ‘<span class="k-state-default" title="#= Name #"><p>#= Name #</p></span>‘,
        dataTextField: "Code",
        dataValueField: "Id",
        filter: "startswith",
        optionLabel: "選擇...",
        noDataTemplate: ‘沒有找到相關數據!‘,
        height: 200,
        autoWidth: true
    });

上面的demo是一個帶有兩列顯示數據的可選項列表。

這裏使用了template參數，自定義了下拉可選項的顯示樣式，這裏在實際應用的時候需要自定義css顯示樣式。

官網也有類似的demo，大家可以參考。

（6）kendo UI使用基礎介紹與問題整理——dropdownlist/基礎問題整理