<h3>本地數據方式</h3> <select class="form-control input-sm downList1"> <option></option> </select> <h3>AJAX獲取數據方式</h3> <select class="form-control input-sm downList2"> <option></option> </select> 代碼 本地數據方式: html的select中的option是可選的,如果不寫一個空的option標簽,則默認選擇第一項;如果寫了option標簽,則默認為空,但調用的時候,最好設置placeholder屬性,為了美觀;AJAX獲取數據方式: html的select中的option是必選的 javascript <script type="text/javascript"> //one 本地數據方式 var dataList = [ { id: 0, text: 'ljiong.com(老囧博客)' }, { id: 1, text: 'Ants(螞蟻)' }, { id: 2, text: 'can you speak javascript(你能講JavaScript嘛)' }, { id: 3, text: 'vae(許嵩)' }, { id: 4, text: 'Badminton(羽毛球)' } ]; $(".downList1").select2({ data: dataList, placeholder:'請選擇',//默認文字提示 language: "zh-CN",//漢化 allowClear: true//允許清空 }) //two AJAX獲取數據方式(請求一次) var oneReq = []; $.ajax({ type:"post", url:"URL", dataType:"json", contentType:"application/json", success:function(data){ oneReq = data; }, error:function(data){ } }); $(".downList2").select2({ data: oneReq, placeholder:'請選擇',//默認文字提示 language: "zh-CN",//漢化 allowClear: true//允許清空 }) //two AJAX獲取數據方式(每次請求) $(".downList2").select2({ ajax: { type:'GET', url: "url", dataType: 'json', delay: 250, data: function (params) { return { q: params.term, // search term 請求參數 , 請求框中輸入的參數 page: params.page }; }, processResults: function (data, params) { params.page = params.page || 1; /*var itemList = [];//當數據對象不是{id:0,text:'ANTS'}這種形式的時候,可以使用類似此方法創建新的數組對象 var arr = data.result.list for(item in arr){ itemList.push({id: item, text: arr[item]}) }*/ return { results: data.items,//itemList pagination: { more: (params.page * 30) < data.total_count } }; }, cache: true }, placeholder:'請選擇',//默認文字提示 language: "zh-CN", tags: true,//允許手動添加 allowClear: true,//允許清空 escapeMarkup: function (markup) { return markup; }, // 自定義格式化防止xss注入 minimumInputLength: 1,//最少輸入多少個字符后開始查詢 formatResult: function formatRepo(repo){return repo.text;}, // 函數用來渲染結果 formatSelection: function formatRepoSelection(repo){return repo.text;} // 函數用於呈現當前的選擇 }); </script>