select2 和 ajax的坑

VEIGHTZ 发布于2019-08-02 15:22 / 485人阅读

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://www.ucloud.cn/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