有时候我们的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);
}
页面效果