select2中的ajax請求


<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>

  


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM