select2使用方法

引用

<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script>
           

支援中文需要引用對應的語言包

$("#e1").select2({
        createSearchChoice:function(term, data) { //如果沒有比對到選項，自動将使用者輸入值封裝成相應的資料對象
            return {id:term, text:term}; 
        },
        formatResult:function(item){ //可自定義模闆 下拉選項的模闆
            return item.text+' '+item.id;
        },
        ajax: {  
            url: "url", // 異步請求位址  
            dataType: "json", // 資料類型  
            delay: ,//預設情況下，每當使用者改變搜尋條件後就會觸發ajax請求，使用ajax.delay來限制請求時間間隔，機關ms
            data: function(term, page) { // 請求參數（GET）  
                return {  
                           wd: term  
                       };  
                 },
            processResults: function (data) {//處理傳回資料
                return {
                          results: data
                       };
                 },
            escapeMarkup: function(m) {  //轉義字元處理
                return m;  
                }
            }  
            }).on('change',function(event){
                //TODO:
                change事件，event有三個屬性 val、added、removed，分别對應目前對象，新選中的對象、删除的對象。
                資料格式參考ajax傳回的json格式
            });
           

html頁面

<input id="e1" type="hidden"/>