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初始化设置延迟加载
  • select2里要赋值初始化选中又要赋值初始化列表,需要先做具体的赋值,后面再调用一次select2初始化一次并且加延迟加载。
    原文作者:吴傲阳
    原文地址: https://segmentfault.com/a/1190000019599511
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞