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初始化一次并且加延迟加载。