select2 和 ajax的坑

时间 2020-06-09

标签 select2 select ajax 栏目 Ajax 繁體版

原文原文链接

select2，一款带多选功能，样式更加好看的select插件。ajax

下方记录坑，前方高能.async

要用ajax发请求而且为select2赋初始值post

$.ajax({url

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下拉列表就有了对应的值插件

真有这么简单???下方记录大坑！！code

不要同时发ajax请求，可能引发冲突
在ajax结构体里发请求，好比编辑功能，获取具体的值为select2赋初始值，注意给select2初始化设置延迟加载
select2里要赋值初始化选中又要赋值初始化列表，须要先作具体的赋值，后面再调用一次select2初始化一次而且加延迟加载。