jquery Ajax实现Select动态添加数据


Posted in jQuery onJune 08, 2017

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获取table下某一行某一列的值实现代码
Apr 07 jQuery
vue+jquery+lodash实现滑动时顶部悬浮固定效果
Apr 28 jQuery
jQuery实现模糊搜索功能的方法分析
Jun 29 jQuery
jQuery 获取除某指定对象外的其他对象 ( :not() 与.not())
Oct 10 jQuery
AJAX在JQuery中的应用详解
Jan 30 jQuery
jQuery实现的隔行变色功能【案例】
Feb 18 jQuery
jQuery控制input只能输入数字和两位小数的方法
May 16 jQuery
高效jQuery选择器的5个技巧实例分析
Nov 26 jQuery
jQuery 判断元素是否存在然后按需加载内容的实现代码
Jan 16 jQuery
jQuery实现的解析本地 XML 文档操作示例
Apr 30 jQuery
jquery更改元素属性attr()方法操作示例
May 22 jQuery
jQuery实现简单飞机大战
Jul 05 jQuery
jquery实现放大镜简洁代码(推荐)
Jun 08 #jQuery
jQuery+ajax实现局部刷新的两种方法
Jun 08 #jQuery
jQuery 添加样式属性的优先级别方法(推荐)
Jun 08 #jQuery
jquery dataTable 后台加载数据并分页实例代码
Jun 07 #jQuery
jQuery用户头像裁剪插件cropbox.js使用详解
Jun 07 #jQuery
JQueryMiniUI按照时间进行查询的实现方法
Jun 07 #jQuery
jquery仿京东商品放大浏览页面
Jun 06 #jQuery
You might like
php,ajax实现分页
2008/03/27 PHP
php pack与unpack 摸板字符字符含义
2009/10/29 PHP
JavaScript初学者需要了解10个小技巧
2010/08/25 Javascript
JS基础之undefined与null的区别分析
2011/08/08 Javascript
javascript圆盘抽奖程序实现原理和完整代码例子
2014/06/03 Javascript
使用AngularJS 应用访问 Android 手机的图片库
2015/03/24 Javascript
JS+CSS实现仿触屏手机拨号盘界面及功能模拟完整实例
2015/05/16 Javascript
jQuery实现有动画淡出效果的二级折叠菜单代码
2015/10/17 Javascript
Vue框架中正确引入JS库的方法介绍
2017/07/30 Javascript
微信小程序图片轮播组件gallery slider使用方法详解
2018/01/31 Javascript
微信小程序实现MUI数字输入框效果
2018/01/31 Javascript
解决vue+element 键盘回车事件导致页面刷新的问题
2018/08/25 Javascript
解决angular2在双向数据绑定时[(ngModel)]无法使用的问题
2018/09/13 Javascript
深入理解 JS 垃圾回收
2019/06/03 Javascript
angularjs请求数据的方法示例
2019/08/06 Javascript
非常实用的jQuery代码段集锦【检测浏览器、滚动、复制、淡入淡出等】
2019/08/08 jQuery
python实现2014火车票查询代码分享
2014/01/10 Python
Python+MongoDB自增键值的简单实现
2016/11/04 Python
Unicode和Python的中文处理
2017/03/19 Python
浅谈Python 的枚举 Enum
2017/06/12 Python
Python实现定制自动化业务流量报表周报功能【XlsxWriter模块】
2019/03/11 Python
Django框架会话技术实例分析【Cookie与Session】
2019/05/24 Python
numpy数组做图片拼接的实现(concatenate、vstack、hstack)
2019/11/08 Python
python matplotlib拟合直线的实现
2019/11/19 Python
python实现堆排序的实例讲解
2020/02/21 Python
解决H5的a标签的download属性下载service上的文件出现跨域问题
2019/07/16 HTML / CSS
下述程序的作用是计算机数组中的最大元素值及其下标
2012/11/26 面试题
幼儿园开学家长寄语
2014/01/19 职场文书
高二生物教学反思
2014/01/27 职场文书
材料专业毕业生求职信
2014/02/26 职场文书
迎七一演讲稿
2014/09/12 职场文书
董事长秘书工作总结
2015/08/14 职场文书
2016年大学生实习单位评语
2015/12/01 职场文书
我的中国梦心得体会范文
2016/01/05 职场文书
该怎么书写道歉信?
2019/07/03 职场文书
使用logback实现按自己的需求打印日志到自定义的文件里
2021/08/30 Java/Android