本文主要为大家详细介绍了jquery ajax实现select动态添加数据的相关资料，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能帮助到大家。
jquery ajax实现select动态添加数据，具体内容如下
1.背景
最近在工作中，遇到了一个关于select的问题。一般情况下，select下拉框中的数据都是固定的或者直接在jsp中读取列表值显示。但是，这次要实现select与别的选项框联动，也就是要动态添加option数据。查阅了很多资料，终于搞定。下面就分享一下，如何利用jquery和ajax实现select动态添加数据。
2.本文代码实现的是车辆型号根据车辆品牌联动显示的功能。首先，是jsp中的车辆品牌定义，这个很简单。如下：
<li class="form-row">
<span style="white-space:pre"> </span>
<span class="form-lbl"><i class="tip form-tip">*</i>车系</span>
<select class="form-select" name="modelid">
</select>
</li>
然后，是js代码：
function getmodellist(){
var brandid = $("select[name=brandid]").val();
$("select[name=modelid]").empty(); //清空
$.ajax({url:'/getmodellist.do',
type:"post",
data:{
brandid : brandid
},
cache: false,
error:function(){
},
success:function(data){
var modellist = data.modellist;
if(modellist && modellist.length != 0){
for(var i=0; i<modellist.length; i++){
var option="<option value=\""+modellist[i].modelid+"\"";
if(_lastmodelid && _lastmodelid==modellist[i].modelid){
option += " selected=\"selected\" "; //默认选中
_lastmodelid=null;
}
option += ">"+modellist[i].modelname+"</option>"; //动态添加数据
$("select[name=modelid]").append(option);
}
}
}
});
}
最后，是后台代码：
@requestmapping("/getmodellist")
@responsebody
public map getmodellist(integer brandid) {
list<srmsmodel> modellist = null;
try{
modellist = carinfomanager.getsrmsmodellistbybrandid(brandid);
}catch(exception e){
logger.error("获取年租车辆型号异常:{}", e.getmessage());
}
map<string, object> returnmap = maps.newhashmap();
returnmap.put("modellist", modellist);
return returnmap;
}
相关推荐：
给ajax返回的html标签动态添加样式的方法
使用jquery实现动态添加小广告详解
实例分享jquery动态添加.active 实现导航效果代码
以上就是jquery ajax实现select动态添加数据实例解析的详细内容。