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(""+result[key]+"");
	        }else{
	            select.append(""+result[key]+"");
	        }
	    }
            //初始化selectpicker插件
	    select.selectpicker({
	    });
	});
};

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

添加 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 list = dataService.getInfoList();
	Map data = new HashMap<>();
	list.forEach(info->{
		data.put(info.getId(), info.getDataName());
	});
	return JSON.toJSONString(data);
}
	

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

实现效果。