jquery Ajax怎么实现Select动态添加数据

这篇文章主要介绍jquery Ajax怎么实现Select动态添加数据，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！

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

1.背景 

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

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

<li class="form-row"> <span > </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;  }

jquery是什么

jquery是一个简洁而快速的JavaScript库，它具有独特的链式语法和短小清晰的多功能接口、高效灵活的css选择器，并且可对CSS选择器进行扩展、拥有便捷的插件扩展机制和丰富的插件，是继Prototype之后又一个优秀的JavaScript代码库，能够用于简化事件处理、HTML文档遍历、Ajax交互和动画，以便快速开发网站。

以上是“jquery Ajax怎么实现Select动态添加数据”这篇文章的所有内容，感谢各位的阅读！希望分享的内容对大家有帮助，更多相关知识，欢迎关注亿速云行业资讯频道！