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; }
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
相关文章
jQuery实现点击自身以外区域关闭弹出层功能完整示例【改进版】
这篇文章主要介绍了jQuery实现点击自身以外区域关闭弹出层功能,结合具体实例形式分析了jQuery事件响应及页面元素属性动态操作实现弹出层打开与关闭相关操作技巧,需要的朋友可以参考下2018-07-07关于jQuery object and DOM element
本篇文章,小编将为大家介绍,关于jQuery object and DOM element,有需要的朋友可以参考一下2013-04-04浅谈$(''div a'') 与$(''div>a'')的区别
下面小编就为大家带来一篇浅谈$('div a') 与$('div>a')的区别。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧2016-07-07
最新评论