select2 和 ajax的坑

VEIGHTZ 發布于2019-08-02 15:22 / 502人閱讀

select2，一款帶多選功能，樣式更加好看的select插件。

下方記錄坑，前方高能.

要用ajax發請求并且為select2賦初始值

$.ajax({

                           url : _ctx+"/basInfo/listPsinfoData",
                           data : "page=1&rows=9999&flag=1",
                           type : "post",
                           async : false,
                           success : function(msg) {
                               $("#" + PreSeleltName + "PSCODES").empty();
                               var pscodeList = [];
                               var pscodeString = "";
                               var tempList = [];
                               var data = msg.rows;
                               for ( var i in data) {
                                   var temp = data[i];
                                   var tempPscode = temp.PSCODE;
                                   var tempPsname = temp.PSNAME;
                                   if(tempPscode && tempPsname){
                                       tempList.push({id :temp.PSCODE,text :temp.PSNAME});
                                   }
                               }
                               //初始化select2 企業 并且 賦值到vmData.data.PSCODELIST
                               $("#" + PreSeleltName + "PSCODES").select2({
                                   data:tempList,
                                   placeholder:"選擇或搜索企業",//默認文字提示
                                   multiple: true,//多選
                                   allowClear: true
                               }).change(function(){
                                   pscodeList = $("#" + PreSeleltName + "PSCODES").val();
                                   for(var i in pscodeList){
                                       var pscode = pscodeList[i];
                                       if(i == 0){
                                           pscodeString = pscode;
                                       }else{
                                           pscodeString = pscodeString + ","+ pscode;
                                       }
                                   }
                                   Vue.set(vmData.data, "PSCODELIST", pscodeString);
                               });
                           },
                       });

這樣select2下拉列表就有了對應的值

真有這么簡單???下方記錄大坑！！

不要同時發ajax請求，可能引起沖突

在ajax結構體里發請求，比如編輯功能，獲取具體的值為select2賦初始值，注意給select2初始化設置延遲加載

select2里要賦值初始化選中又要賦值初始化列表，需要先做具體的賦值，后面再調用一次select2初始化一次并且加延遲加載。

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/54089.html

select2 和 ajax的坑

select2，一款帶多選功能，樣式更加好看的select插件。下方記錄坑，前方高能. 要用ajax發請求并且為select2賦初始值 $.ajax({ url : _ctx+/basInfo/listPsinfoData, data : page=1&rows=9999&flag=...

plokmju88 2019-08-23 18:21 評論0 收藏0
bootstrap select2 tags用法總結

摘要：原創用法總結前言最近用到的，官方文檔中的例子也很多在此寫一些實際項目中用法總結，有需要的朋友可以借鑒一下。（原創） bootstrap select2 用法總結前言最近用到bootstrap 的 select2，官方文檔中的例子也很多在此寫一些實際項目中用法總結，有需要的朋友可以借鑒一下。效果圖 showImg(https://segmentfault.com/img/bV...

Zack 2019-06-27 11:34 評論0 收藏0
bootstrap select2 tags用法總結

摘要：原創用法總結前言最近用到的，官方文檔中的例子也很多在此寫一些實際項目中用法總結，有需要的朋友可以借鑒一下。（原創） bootstrap select2 用法總結前言最近用到bootstrap 的 select2，官方文檔中的例子也很多在此寫一些實際項目中用法總結，有需要的朋友可以借鑒一下。效果圖 showImg(https://segmentfault.com/img/bV...

flyer_dev 2019-08-22 11:59 評論0 收藏0
Yii2下的select2使用

摘要：新手，不擅長寫，純粹只是分享一下自己遇到的問題供大家參考一下這個插件，就是帶搜索功能的下拉選擇框效果如圖使用前先確定自己的項目安裝了，如果沒有的話就用安裝一下使用的時候先在頭部引用插件如果表單是，可以使用下面代碼是鍵值對數組，下面所聲明的新手，不擅長寫js，純粹只是分享一下自己遇到的問題供大家參考一下 select2這個插件，就是帶搜索功能的下拉選擇框效果如圖：showImg(ht...

Cristic 2019-06-28 13:40 評論0 收藏0