select框下拉多选（从数据库中获取选项）

    前面写了几篇关于select的文章，今天说一下select下拉框多选的问题。下拉框多选selectpicker插件做的非常漂亮，selectpicker是bootstrap里的一个下拉框的组件。我在这个插件初始化之前稍微加点东西，实现下拉框的选项从数据库中读取并根据传入值默认选中。

使用jQuery的扩展方法，适用于每一个select示例。

$.fn.ajaxselectmore = function(options) {
	var select = this;
	var data = options.value.split(",");
	$.get(options.url,function(result){
	    for(key in result){
	        if(data.indexOf(key)>-1){
	            select.append("<option value='"+key+"' selected>"+result[key]+"</option>");
	        }else{
	            select.append("<option value='"+key+"'>"+result[key]+"</option>");
	        }
	    }
            //初始化selectpicker插件
	    select.selectpicker({
	    });
	});
};

页面引入selectpicker插件需要的js和css,不想自己去找的同学可以到我这项目的包来下载(这个包里的fonts也需要)

<link rel="stylesheet" type="text/css" href="${ctx}/reports/tiles/bootstrap/css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="${ctx}/reports/tiles/bootstrap/css/bootstrap-select.min.css" />
<script type="text/javascript" src="${ctx}/reports/tiles/js/jquery-2.2.3.min.js"></script>
<script type="text/javascript" src="${ctx}/reports/tiles/bootstrap/js/bootstrap-select.min.js"></script>
<script type="text/javascript" src="${ctx}/reports/tiles/bootstrap/js/bootstrap.min.js"></script>

<div class="col-xs-8">
    <select id="dataId" name="dataId" class="selectpicker" multiple data-live-search="true" style="width:100%;">
    </select>
</div>

添加 class="selectpicker" multiple data-live-search="true"，页面初始化方法如下

$("#dataId").ajaxselectmore({
   url:"${ctx}/rep/getAllData",
   value:"1,2,3"
});

url为从后台获取数据的接口地址，因为是多选，所以value是多个值用","隔开。

/**
 * 获取所有数据项
 * @return json
 */
@RequestMapping(value="/getAllData",produces = "application/json; charset=utf-8")
@ResponseBody
public String getAllData(){
	List<DataInfo> list = dataService.getInfoList();
	Map<String, String> data = new HashMap<>();
	list.forEach(info->{
		data.put(info.getId(), info.getDataName());
	});
	return JSON.toJSONString(data);
}
	

后端代码也贴个方法出来给大家参考一下。

实现效果。