select2-和-ajax的坑

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 里要赋值初始化选中又要赋值初始化列表，需要先做前面的，后面的做延迟加载。