select框中的选项从数据库中获取的公共方法

有时候我们的select框中的选项并不是固定的，需要到数据库中取获取最新的数据。

使用jQuery扩展方法，用ajax去后端获取数据拼接option到select中。

/**
 * @param options
 * url 获取数据的地址
 * initvalue 请选择
 * value 默认选中
 */
$.fn.ajaxselect = function(options) {
	var select = this;
	$.get(options.url,function(result){
	    if(options.initvalue!=null&&options.initvalue!=''){
	        this.append(""+options.initvalue+"");  
	    }
	    for(key in result){
	        if(key == options.value){
	            select.append(""+result[key]+"");
	        }else{
	            select.append(""+result[key]+"");
	        }
	    }
	});
};

html页面

		
 数据源：
 

		

			
			
		
	

调用方法

$("#dbId").ajaxselect({
	url:"${ctx}/data/getDbJson",
	value:'${dataInfo.dbId}'
});

后台方法

/**
 * 获取所有数据源
 * @return json
 */
@RequestMapping(value="/getDbJson",produces = "application/json; charset=utf-8")
@ResponseBody
public String getDbJson(){
	List dbInfos = dbService.getInfoList();
	Map map = new HashMap<>();
	dbInfos.forEach(dbInfo->{
		map.put(dbInfo.getId(), dbInfo.getDbName());
	});
	return JSON.toJSONString(map);
}

页面效果