jquery Ajax实现Select动态添加数据实例解析

本文主要为大家详细介绍了jquery ajax实现select动态添加数据的相关资料，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能帮助到大家。

jquery Ajax实现Select动态添加数据，具体内容如下

1.背景 

最近在工作中，遇到了一个关于select的问题。一般情况下，select下拉框中的数据都是固定的或者直接在jsp中读取列表值显示。但是，这次要实现select与别的选项框联动，也就是要动态添加option数据。查阅了很多资料，终于搞定。下面就分享一下，如何利用jQuery和Ajax实现select动态添加数据。 

2.本文代码实现的是车辆型号根据车辆品牌联动显示的功能。首先，是jsp中的车辆品牌定义，这个很简单。如下：

  *车系    

然后，是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>"+modelList[i].modelName+""; //动态添加数据
  $("select[name=modelId]").append(option);
 }
 }
 }
 });
}</modellist.length>

最后，是后台代码：

@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> returnMap = Maps.newHashMap();
 returnMap.put("modelList", modelList);
 return returnMap;
 }</string></srmsmodel>

相关推荐：

给Ajax返回的HTML标签动态添加样式的方法

使用jQuery实现动态添加小广告详解

实例分享jQuery动态添加.active 实现导航效果代码