关于jQuery插件select2的使用（包含修改数据时select多选内容数据回显）

关于jQuery插件select2的使用（数据回显）

最近在项目中需要做一个所属区—>委办局—>初审人员，复审人员 的三级联动并且下拉框可多选的功能，初步使用select2插件，还是挺好用的。

在此以修改数据 select 页面回显为例：

后台controller：

/**
	 * 查找审核人员
	 */
	@ResponseBody
	@RequestMapping(value = "findUser")
	public String findUser(String id){
		String listString=null;
		String jsonString1=null;
		String jsonString2=null;		
			List list1 = new ArrayList<>();
			List list2 = new ArrayList<>();			
			ServiceItem queryUserById = officeDao.queryUserById(id);			
			if (queryUserById!=null) {
				String id2 = queryUserById.getFirstAudit().getId();		
				String id3 = queryUserById.getReview().getId();
				String s = id2;
				String[] split = s.split(",");
				for (int i = 0; i < split.length; i++) {					
					User queryNameById = officeDao.queryNameById(split[i]);
					HashMap<String, String> hashMap = new HashMap<>();
					hashMap.put("id",queryNameById.getId());
					hashMap.put("name",queryNameById.getName());
					list1.add(hashMap);
				}	
				String ss = id3;
				String[] splits = ss.split(",");
				for (int i = 0; i < splits.length; i++) {					
					User queryNameById = officeDao.queryNameById(splits[i]);
					HashMap<String, String> hashMap = new HashMap<>();
					hashMap.put("id",queryNameById.getId());
					hashMap.put("name",queryNameById.getName());
					list2.add(hashMap);
				}
				jsonString1 = JSON.toJSONString(list1);
				jsonString2 = JSON.toJSONString(list2);
				listString=jsonString1+"_split_"+jsonString2;
			}	
		return listString;
	}

前台在页面初始化时发送ajax请求：

//页面初始化时发送请求拿到审核人员数据
		 $(document).ready(function(){
			$("#opt1").select2({
				placeholder: '选择审核人员'
			});	
			$("#opt2").select2({
				placeholder: '选择审核人员'
			});		
			var id = $("#p1").attr("value");
			$.ajax({
		         type: 'GET',
		         url: '${ctx}/item/serviceItem/findUser?id='+id,
		         dataType: 'text',		         
		         success: function(data){
		         //由于需要的是两个下拉框的回显，所以后台在传的时候用字符串分割开了
		        	 var arr = data.split("_split_");
                     var arr1 = $.parseJSON(arr[0]);
                     var arr2 = $.parseJSON(arr[1]);		        			        	 
		        	 echoSelect2("#opt1",arr1);	 
		        	 echoSelect2("#opt2",arr2);	
				  }, 
		         error :function(e) {
		             console.info("error");
		         }
		        });	 
		}); 
		//回显数据
		 function echoSelect2(dom,value){
		     $.each(value,function(index,value){
		         $(dom).append(new Option(value.name, value.id, false, true));
		     });
		     $(dom).trigger("change");
		 }