formSelects-v4 动态多选下拉框

formSelects-v4.js Layui 在ie浏览器中实现动态多选下拉框

目的为实现如下图所示的效果:
在这里插入图片描述
下面代码可以实现:

					  	 	      if (res.length > 0) {
					  	 	       var arr= new Array();
					  	 	    for (var i = 0; i < res.length; i++) {
					  	 	           var item = res[i];
					  	 	        	  arr.push({name: item.orgName, value: item.orgId});
					  	 	         }
					  	 	    	layui.formSelects.data('select2', 'local', {
					  	 	            arr:arr 
					  	 	        });
					  	 	 		var res=new Array();//渲染已选中的
					  	 			var area = "";
					  	 			var tmp = data.data.visibleAreas;
					  	 			for(var i=0;i<JSON.parse(tmp).length;i++){
					  	 				area  =JSON.parse(tmp)[i].value;
					  	 				res.push(area)
					  	 				}
									layui.formSelects.value('select2', res, true); 
					  	 	        }

但是你可能会发现,这样写了之后并没有显示出该效果.
下面说一下我遇到的坑.
该功能需要引用
layui.css
formSelects-v4.css
layui.js
formSelects-v4.js .
第一个坑就是这四个文件的版本是都兼容,是都一致,尤其是 formSelects-v4.js 和formSelects-v4.css的版本.
第二个坑就是这四个文件在页面的引用顺序不对的也会出错.我的引用顺序依次为layui.css formSelects-v4.css layui.js formSelects-v4.js .
存在上面的问题可能在谷歌等浏览器可以正常显示,但是IE浏览器会出现问题.


版权声明:本文为m0_37585097原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。