在我的印象裡Select2有2個版本，最新版本有一些新的特性，並且更新了一下方法引數，比最初版本要好看一些，本文針對新版本。

官網：http://select2.github.io/ 

由於部落格系統的原因，所以只能演示簡單的功能。

一.檔案需要引入select2.full.js、select2.min.css（4.0.1版本）和jQuery.1.8.3及以上

最新版本的select2如果引用的jquery版本較低的話，某些功能無法正常使用。比如：清除功能allowClear: true

最新版本請使用<select></select>標籤（對於本地化的資料你可以使用input，但ajax遠端資料必須使用select）

二.placeholder

placeholder佔位提示文字，如果需要清楚功能，則必須設定placeholder。

三.載入本地資料

select2預設的資料屬性是id、text，新版本可以自定義，但還是用預設的比較好。所以提供的json中最好轉換為id、text形式，當然可以新增其他屬性。

var data = [{ id: 0, text: 'enhancement' }, { id: 1, text: 'bug' }, { id: 2, text: 'duplicate' }, { id: 3, text: 'invalid' }, { id: 4, text: 'wontfix' }];
$(
 
"#c01-select").select2({
  data: data,
  placeholder:'請選擇',
  allowClear:true
})

四.載入遠端資料

$("#c01-select").select2({
  ajax: {
    url: "data.json",
    dataType: 'json',
    delay: 250,
    data: function (params) {
      return {
        q: params.term,
      };
    },
    processResults: function
 
 (data) {
      return {
        results: data
      };
    },
    cache: true
  },
  escapeMarkup: function (markup) { return markup; }, 
  minimumInputLength: 1,
  templateResult: formatRepo, 
  templateSelection: formatRepoSelection 
});

說明：

     1.q: params.term 查詢引數（params.term表示輸入框中內容，q發生到伺服器的引數名；所以這裡你可以新增自定義引數，如：stype:'person'）

     2.processResults中results: data返回資料（返回最終資料給results，如果我的資料在data.res下，則返回data.res。這個與伺服器返回json有關）

     3.minimumInputLength 最小需要輸入多少個字元才進行查詢，與之相關的maximumSelectionLength表示最大輸入限制。

     4.escapeMarkup字元轉義處理

     5.templateResult返回結果回撥function formatRepo(repo){return repo.text},這樣就可以將返回結果的的text顯示到下拉框裡，當然你可以return repo.text+"1";等

     6.templateSelection選中項回撥function formatRepoSelection(repo){return repo.text}

     7.關於返回的 json的格式：select2預設json格式為[{id:1,text:'text'},{id:2,text:'text'}]，新版嚴格要求這樣的格式，當然你可以新增列，如：[{id:1,text:'text',name:'liu'}]

五.獲取選中項

var res=$("#c01-select").select2("data")[0] ; //單選
var reslist=$("#c01-select").select2("data");    //多選
if(res==undefined)
{
     alert("你沒有選中任何項");
}
if(reslist.length)
{
     alert("你選中任何項");
}

六.清空選擇項和設定不可用

//清空選擇
$("#c01-select").val(null).trigger("change");
$("#c01-select").val("你的placeholder").trigger("change");//或者
//如果你使用的是input標籤（預設就是本地資料），你可以用$("#c01-select").val('');來清空選項

//disabled
$("#c01-select").prop("disabled", false);//可用
$("#c01-select").prop("disabled", true);//不可用

七.啟用多選

$("#c01-select").select2({
  data:data,
  multiple: true
});

多選演示：

由於部落格系統原因只能演示選擇

八.下面簡單說明新版與老版對比

1.結果回撥和選中回撥名稱：formatResult、formatSelection（老版）；templateResult、templateSelection（新版）

2.初始化：

//老版，注意如果初始化時文字框中本身沒有值（為空），則不會觸發該方法
initSelection: function (element, callback) {
   var id = $(element).val();
   var data = { id: id, text: id};//這裡是初始化的資料，你可以通過id來從伺服器上獲取（ajax），再裝載進去
   callback(data);
}

//新版，直接給select新增option
$("#id").append(new Option("Jquery", 10001, false, true));
//或者
$("#id").append("<option value='10001'>Jquery</option>");

3.獲取或設定值：select2("val")（老版）；$("select").val()（新版）

推薦使用

var res = $("#id").select2("data");
//返回陣列，單選就取res[0]；好處是不進可以獲取id、text還可以獲取其他屬性，如res[0].names

4.停用或啟用：$("select").enable(false);（老版）；$("select").prop("disabled", true);（新版）

5.主題樣式：新版的樣式已經更新，但如果想使用老版樣式則可以設定 theme: "classic"

Select2控制元件介紹

我們在整個框架裡面，用到了很多Select2控制元件來處理內容的顯示，包括單選的下拉列表（包括級聯選擇框）、複選的下拉列表、樹形下拉列表等方式，介面效果如下所示。

1）編輯介面下的省份、城市、所在行政區的級聯介面效果，選擇省份，會載入對應省份下的城市，選擇城市，會繼續載入城市下的行政區，從而實現多級關聯的下拉列表效果。

2）編輯介面下的多項選擇下拉列表

但我們選擇其中的內容的時候，系統自動顯示出沒有選擇的列表資料，非常直觀友好，如下所示。

3）樹形列表的下拉列表

有時候，我們的一些資料可能有層次關係的，如所屬機構、上層列表等等。

2、Select2控制元件的實際使用程式碼分析

1）基礎介面程式碼及操作

使用select2控制元件，一般是在常規的select控制元件上，設定一下即可（設定它的class為select2）。

 <div class="col-md-6">
    <div class="form-group">
        <label class="control-label col-md-4">重要級別</label>
        <div class="col-md-8">
            <select id="Importance" name="Importance" class="form-control select2" placeholder="重要級別..."></select>
        </div>
    </div>
</div>
 <div class="col-md-6">
    <div class="form-group">
        <label class="control-label col-md-4">認可程度</label>
        <div class="col-md-8">
            <select id="Recognition" name="Recognition" class="form-control select2" placeholder="認可程度..."></select>
        </div>
    </div>
</div>

如果是固定列表，那麼也就是設定它的Option內容即可，如下所示。

 <div class="col-md-6">
    <div class="form-group">
        <label class="control-label col-md-4">吸菸</label>
        <div class="col-md-8">
            <select id="Smoking" name="Smoking" type="text" class="form-control select2" placeholder="吸菸...">
                <option>吸菸</option>
                <option>不吸菸</option>
            </select>
        </div>
    </div>
</div>

簡單的select2控制元件初始化程式碼如下所示。

$(document).ready(function() {
  $(".js-example-basic-single").select2();
});

一般情況下，如果允許複選多個專案，那麼設定 multiple="multiple"即可，如下程式碼所示。

 <select id="ResponseDemand" name="ResponseDemand" multiple="multiple" class="form-control select2"></select>

2）非同步資料繫結操作

一般情況下，我們的select控制元件的資料，是從資料庫裡面動態載入的，因此一般是通過Ajax方式獲取資料並進行繫結即可。

基於程式碼可重用性的考慮，我們編寫一個公用的JS函式，用來減少繫結操作的程式碼，提高程式碼重用性。

//繫結字典內容到指定的Select控制元件
function BindSelect(ctrlName, url) {
    var control = $('#' + ctrlName);
    //設定Select2的處理
    control.select2({
        allowClear: true,
        formatResult: formatResult,
        formatSelection: formatSelection,
        escapeMarkup: function (m) {
            return m;
        }
    });

    //繫結Ajax的內容
    $.getJSON(url, function (data) {
        control.empty();//清空下拉框
        $.each(data, function (i, item) {
            control.append("<option value='" + item.Value + "'>&nbsp;" + item.Text + "</option>");
        });
    });
}

這樣，繫結公用字典模組的資料，也就可以通過下面進一步封裝處理即可。

//繫結字典內容到指定的控制元件
function BindDictItem(ctrlName, dictTypeName) {
    var url = '/DictData/GetDictJson?dictTypeName=' + encodeURI(dictTypeName);
    BindSelect(ctrlName, url);
}

這樣我們初始化Select2 控制元件，並動態繫結對應的字典值或者其他資料，則可以通過下面初始化程式碼即可實現。其中BindDictItem就是直接繫結字典內容的操作，BindSelect則是根據URL進行資料的獲取並繫結，而$("#Province").on("change", function (e) {});這樣的函式處理，就是處理選擇內容變化的聯動操作了。

        //初始化字典資訊（下拉列表）
        function InitDictItem() {
            //部分賦值參考            
            BindDictItem("Area","市場分割槽");
            BindDictItem("Industry", "客戶行業");
            BindDictItem("Grade","客戶級別");
            BindDictItem("CustomerType", "客戶型別");
            BindDictItem("Source", "客戶來源");
            BindDictItem("CreditStatus", "信用等級");
            BindDictItem("Stage","客戶階段");
            BindDictItem("Status", "客戶狀態");
            BindDictItem("Importance",  "重要級別");     
            
            // 繫結省份、城市、行政區（聯動處理）
            BindSelect("Province", "/Province/GetAllProvinceNameDictJson");
            $("#Province").on("change", function (e) {
                var provinceName = $("#Province").val();
                BindSelect("City", "/City/GetCitysByProvinceNameDictJson?provinceName="+ provinceName);
            });

            $("#City").on("change", function (e) {
                var cityName = $("#City").val();
                BindSelect("District", "/District/GetDistrictByCityNameDictJson?cityName="+ cityName);
            });
        }

而其中MVC控制器返回的資料，我們是返回一個JSON資料列表給前端頁面的，他們的資料格式如下所示。

[ { "Text": "", "Value": "" }, { "Text": "學術會議", "Value": "學術會議" }, { "Text": "朋友介紹", "Value": "朋友介紹" }, { "Text": "廣告媒體", "Value": "廣告媒體" } ]

這樣前端頁面繫結Select2控制元件的時候，就使用了JSON物件的屬性即可。

    //繫結Ajax的內容
    $.getJSON(url, function (data) {
        control.empty();//清空下拉框
        $.each(data, function (i, item) {
            control.append("<option value='" + item.Value + "'>&nbsp;" + item.Text + "</option>");
        });
    });

控制器的實現程式碼如下：

        /// <summary>
        /// 根據字典型別獲取對應的字典資料，方便UI控制元件的繫結
        /// </summary>
        /// <param name="dictTypeName">字典型別名稱</param>
        /// <returns></returns>
        public ActionResult GetDictJson(string dictTypeName)
        {
            List<CListItem> treeList = new List<CListItem>();
            CListItem pNode = new CListItem("", "");
            treeList.Insert(0, pNode);

            Dictionary<string, string> dict = BLLFactory<DictData>.Instance.GetDictByDictType(dictTypeName);
            foreach (string key in dict.Keys)
            {
                treeList.Add(new CListItem(key, dict[key]));
            }
            return ToJsonContent(treeList);
        }

3）樹形列表的繫結操作

對於屬性列表，如所屬公司、所屬部門機構等有層次性的資料，它的繫結操作也是類似的，如下程式碼所示。

            //繫結新增介面的公司、部門、直屬經理
            BindSelect("Company_ID", "/User/GetMyCompanyDictJson?userId="[email protected]["UserId"]);
            $("#Company_ID").on("change", function (e) {
                var companyid = $("#Company_ID").val();
                BindSelect("Dept_ID", "/User/GetDeptDictJson?parentId="+ companyid);
            });
            $("#Dept_ID").on("change", function (e) {
                var deptid = $("#Dept_ID").val();
                BindSelect("PID", "/User/GetUserDictJson?deptId="+ deptid);
            });

只是它們返回的資料，我們把它作為有縮排的顯示內容而已。

[ { "Text": "愛奇迪集團", "Value": "1" }, { "Text": " 廣州分公司", "Value": "3" }, { "Text": " 上海分公司", "Value": "4" }, { "Text": " 北京分公司", "Value": "5" } ]

或者如下所示