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("<option>"+options.initvalue+"</option>");  
	    }
	    for(key in result){
	        if(key == options.value){
	            select.append("<option value='"+key+"' selected>"+result[key]+"</option>");
	        }else{
	            select.append("<option value='"+key+"'>"+result[key]+"</option>");
	        }
	    }
	});
};

html页面

<div class="form-group col-md-6">
		<label class="control-label" style="float:left"><h4> 数据源：</h4> </label>

		<div class="col-xs-8">
			<select class="form-control" id="dbId" name="dbId" class="form-control">
			</select>
		</div>
	</div>

调用方法

$("#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<DbInfo> dbInfos = dbService.getInfoList();
	Map<String, String> map = new HashMap<>();
	dbInfos.forEach(dbInfo->{
		map.put(dbInfo.getId(), dbInfo.getDbName());
	});
	return JSON.toJSONString(map);
}

页面效果