select2插件 多选下拉框和设置大标题

先上个图

项目需要一个支持多选的选人功能，并能区别开不同身份的人。

网上搜了一番发现select2简单又好用，但是找不到设置大标题的方法。后来看了官方英文文档找到了。

直接上代码吧

1. 定义select标签，设置好id：

		<div class="control-group">
			<label class="control-label">主讲人：</label>
			<div class="controls">
				<select id="speakers" style="width:300px;"></select>
				<input type="hidden" name="speakers"/>
				<span class="help-inline"><font color="red">*</font> </span>
			</div>
		</div>
		
		<div class="control-group">
			<label class="control-label">会议秘书：</label>
			<div class="controls">
				<select id="secretary" style="width:300px;"></select>
				<input type="hidden" name="secretary"/>
				<span class="help-inline"><font color="red">*</font> </span>
			</div>
		</div>

2. 引入select2的js和css：

3. 显示大标题的关键是，初始化数据中要有：

{

 element : HTMLOptGroupElement ,

 text : "xxx", 

 children : []

}

这样的结构。element : HTMLOptGroupElement是固定的，有了它以后，大标题就出来了，标题名为text的值，子选项为children中的数据。

我这里用ajax获取后台传来的json数据，数据格式不能错

		$(document).ready(function() {
			//获取成员数据
			$.ajax({
				url: '${ctx}/back/members/membersOption',
				dataType: 'json',
				success: function(data) {
				//初始化
			        $("#speakers").select2({
			        	language: 'zh-CN', //中文
			        	data: data,  //初始化数据
			        	placeholder:'请选择',  //提示语
			  		multiple: true  //开启多选
			        })
			        $("#secretary").select2({
			        	language: 'zh-CN',
			        	data: data,
			        	placeholder:'请选择',
			  		multiple: true
			        })
				}
			})
		})

部分数据如下：

[{

"element" : "HTMLOptGroupElement",

"text" : "学生",

"children“ : [{

"id" : 1,

"element" : "HTMLOptionElement",

"text" : "陈劲松"

     }]

}]

顺便附个后台方法。springmvc。

	/**
	 * 获取选择成员的下拉框数据
	 * 
	 * @return
	 */
	@ResponseBody
	@RequestMapping(value = "membersOption")
	public List<Map<String, Object>> membersOption() {
		List<Map<String, Object>> result = new ArrayList<Map<String, Object>>();
		List<Members> allMembers = this.allMembers();
		
		/*调整数据结构为
		[{
				"text": "大标签",
				"children": [{
					"id": "2",
					"text": "小标签2",
					"element": HTMLOptionElement
				}],
				"element": HTMLOptGroupElement
		 }];
		 */
		if (!Collections3.isEmpty(allMembers)) {
			Map<String, Object> types = new HashMap<String, Object>();
			for (Members member : allMembers) {
				types.put(member.getType(), null);
			}
			for (String type : types.keySet()) {
				List<Map<String, Object>> member = new ArrayList<Map<String, Object>>();
				
				for (Members m : allMembers) {
					if (m.getType().equals(type)) {
						Map<String, Object> memberInfo = new HashMap<String, Object>();
						memberInfo.put("id", m.getId());
						memberInfo.put("text", m.getName());
						memberInfo.put("element", "HTMLOptionElement");
						
						member.add(memberInfo);
					}
				}
				
				Map<String, Object> group = new HashMap<String, Object>();
				group.put("text", type);
				group.put("children", member);
				group.put("element", "HTMLOptGroupElement");
				
				result.add(group);
			}
		}
		return result;
	}

到此OK了！