使用bootstrap-multiselect插件进行前后台数据交互

上一次分享了bootstrap-multiselect插件的一些基本用法，今天想来记下使用该插件的一个实际用途，在公司的项目中，我使用了该插件用于增或者修改某一个对象所关联的属性，由于公司使用的前多选下拉框的中的子项便是我想要关联的子项，那么今天就简单的来分享一下我的思路
首先是对下拉框的一个初始化：

$(document).ready(function () {
	initSelectBox();
	$("#BroadType").multiselect({
   		header : true,
   		height : 175,
   		minWidth : 200,
   		classes : '',
   		noneSelectedText : "==请选择==",
   		checkAllText : "全选",
   		uncheckAllText : '全不选',
   		selectedText : '# 选中',
   		selectedList : 2,
   		show : null,
   		hide : null,
   		autoOpen : false,
   		multiple : true,
   		position : {},
   		appendTo : "body",
   		menuWidth : null
   	});
 });

其中的initSelectBox（）方法，是我用来对下拉框的子项进行动态赋值，方法体如下：

function initSelectBox(){
 	$.post("${pageContext.request.contextPath }/broad/findType.do", function(data) {
	//	var result = eval("(" + data + ")");
			$("#BroadType").empty();
			var html = '';
			for (var i = 0; i < data.varList.length; i++) {
				html += '<option value="'+data.varList[i].DICT_CODE+'">' + data.varList[i].DICT_NAME + '</option>'
			}
			$("#BroadType").append(html);
		});
 }

不难看出这里做的是一个向数据库后台查询并以数组形式返回向前台的操作，这里我将该下拉框先做了一个清空操作，否则会出现每次点下拉框之后，里面的子项会不停地重复添加，使用for循环遍历从后台返回至前台的数组，最后使用.append（）方法将一个个option标签追加至selec标签中。
项目后台使用的是SSM框架，controller层方法如下：

	@RequestMapping(value = "/findType",produces = "application/json;charset=UTF-8")
	@ResponseBody
	public Object findType() throws Exception {
		Map<String,Object> map = new HashMap<String, Object>();
		logBefore(logger, "模糊查询Dept");
		Broad pd = new Broad();
		List<Broad> varList = null;
			varList = broadCastService.findType(pd); 
		map.put("varList", varList);
		return map;
	}

这样就实现了对多选下拉框进行动态添加option以及值
接下来看一下实现选中下拉框的值并传至后台：
由于多选后，下拉框中的值会以xxx,xxx,xxx的形式形成数组，在发送至后台后，会形成json字符串，所以我们需要在后台进行一次处理，处理如下：

String BROAD_TYPE=request.getParameter("BROAD_TYPE").toString().replaceAll("\\[", "").replaceAll("\\]", "").replaceAll("\"", "");
String [] codeList=BROAD_TYPE.split(",");

先将json字符串转为字符串，再用split方法分隔逗号最后存进string数组，因为多选下拉框的用途是让一个对象能够关联多个属性，这里我使用的方法是将该对象的id与需要关联的属性数组进行循环存储，最后表中的数据如图：

该表是一张中间表，用于关联对象和属性之间的关系，右边为对象的id，左边即是属性的id。