这篇文章主要为大家详细介绍了 jquery Ajax 实现 Select 动态添加数据的相关资料,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
jQuery 是一个兼容多浏览器的 javascript 框架,核心理念是 write less,do more(写得更少, 做得更多)。jQuery 在 2006 年 1 月由美国人 John Resig 在纽约的 barcamp 发布,吸引了来自世界各地的众多 JavaScript 高手加入,由 Dave Methvin 率领团队进行开发。
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;
- }
来源: http://www.phperz.com/article/17/0624/336279.html