https://blog.csdn.net/zhengxiangwen/article/details/46480687

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

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

  1. <li class="form-row">
  2. <span style="white-space:pre">    </span><span class="form-lbl"><i class="tip form-tip">*</i>车系</span>
  3. <select class="form-select" name="modelId">
  4. </select>
  5. </li>

然后,是JS代码:

  1. function getModelList(){
  2. var brandId = $("select[name=brandId]").val();
  3. $("select[name=modelId]").empty();      //清空
  4. $.ajax({url:'/getModelList.do',
  5. type:"post",
  6. data:{
  7. brandId : brandId
  8. },
  9. cache: false,
  10. error:function(){
  11. },
  12. success:function(data){
  13. var modelList = data.modelList;
  14. if(modelList && modelList.length != 0){
  15. for(var i=0; i<modelList.length; i++){
  16. var option="<option value=\""+modelList[i].modelId+"\"";
  17. if(_LastModelId && _LastModelId==modelList[i].modelId){
  18. option += " selected=\"selected\" "; //默认选中
  19. _LastModelId=null;
  20. }
  21. option += ">"+modelList[i].modelName+"</option>";  //动态添加数据
  22. $("select[name=modelId]").append(option);
  23. }
  24. }
  25. }
  26. });
  27. }

最后,是后台代码:

  1. @RequestMapping("/getModelList")
  2. @ResponseBody
  3. public Map getModelList(Integer brandId) {
  4. List<SrmsModel> modelList = null;
  5. try{
  6. modelList = carInfoManager.getSrmsModelListByBrandId(brandId);
  7. }catch(Exception e){
  8. LOGGER.error("获取年租车辆型号异常:{}", e.getMessage());
  9. }
  10. Map<String, Object> returnMap = Maps.newHashMap();
  11. returnMap.put("modelList", modelList);
  12. return returnMap;
  13. }

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/Kevin_zhai/article/details/52038513

Jquery+Ajax实现Select动态添加数据的更多相关文章

  1. (转)Jquery+Ajax实现Select动态定数据

    解决思路: 在数据库中建立类型字典式表.将下拉框需要添加的项,在数据库表里中文.英文名称对应起来. 下拉框动态绑定数据库表中需要字段. <div id="bgDiv" sty ...

  2. js表单动态添加数据并提交

    情景1:已经存在form对象了,动态为form增加对象并提交 function formAppendSubmit(){ var myform=$('#newArticleForm'); //得到for ...

  3. 【javascript 动态添加数据到 HTML 页面】

    今天简单的学习了一下有关对象字面量的定义和 javascript 如何取出对象字面量的值的知识,javascript 动态添加数据到 HTML 页面的问题. [学习目标]有如下的一组数据通过 Ajax ...

  4. 关于devexpress报表XtraReport,动态修改报表样式(.repx格式),动态添加数据并使用的理解

    一.基本概念: XtraReports 中的每个报表都由 XtraRepot 类的一个实例表示,或者由该类的子类来表示(这种情况更常见). 因此,每个报表都作为带区的容器使用,而每个带区中都包含报表控 ...

  5. js对select动态添加和删除OPTION

    <select id="ddlResourceType" onchange="getvalue(this)"> </select> 动态 ...

  6. JS对select动态添加options操作[IE&FireFox兼容]

    <select id="ddlResourceType" onchange="getvalue(this)"> </select> 动态 ...

  7. 2016 系统设计第一期 (档案一)jQuery ajax serialize()方法form提交数据

    jQuery ajax serialize()方法form提交数据,有个很奇怪的问题,好像不能取到隐藏控件的值. //点击提交按钮保存数据 $('#btn_submitUser').click(fun ...

  8. 第27讲 UI组件之 ScrollView与底部动态添加数据

    第27讲 UI组件之 ScrollView与底部动态添加数据 1. ScrollView(滚动视图) ScrollView(滚动视图)是实现滚动的一个控件,只需要将需要滚动的控件添加到ScrollVi ...

  9. 使用js对select动态添加和删除OPTION示例代码

    动态删除select中的所有options.某一项option以及动态添加select中的项option,在IE和FireFox都能测试成功,感兴趣的朋友可以参考下,希望对大家有所帮助   <s ...

随机推荐

  1. java之集合概述

    集合也称容器:从大的类别分成两类:Collection和Map,也即:单列和双列列表. java编程思想中一张图说明该体系的整体结构:其中黑色着重的类是经常使用的类. 1 Collection Col ...

  2. Python 函数 -range()

    range() pytho range() 函数可创建一个整数列表,一般用在 for 循环中. 语法: range(start, stop[, step]) start: 计数从 start 开始.默 ...

  3. Oracle之 等待事件log file sync + log file parallel write (awr优化)

    这是3月份某客户的情况,原因是server硬件故障后进行更换之后,业务翻译偶尔出现提交缓慢的情况.我们先来看下awr的情况. 我们能够看到,该系统的load profile信息事实上并不高,每秒才21 ...

  4. Oracle在线新增索引

    Oracle新增索引语法很简单,如果是普通索引的话: create Index IDX_T_WLF on T_WLF(ACTIVITYID,ACTIVETIME) tablespace TBS_VCO ...

  5. Android 系统四大组件

    Android 系统四大组件分别是活动(Activity).服务(Service).广播接收器(Broadcast Receiver)和内容提供器(Content Provider). 活动是所有 A ...

  6. sql语句查询重复数据

    select id, name, memofrom Awhere id in (select id from A group by id having count(1) >= 2)

  7. 第三章:Hadoop简介及配置Hadoop-1.2.1,hbase-0.94.13集群

    前面给大家讲了怎么安装Hadoop,肯定会有人还是很迷茫,装完以后原来就是这个样子,但是怎么用,下面,先给大家讲下Hadoop简介:大致理解下就OK了 hadoop是一个平台,提供了庞大的存储和并行计 ...

  8. Python压缩及解压文件

    Zip压缩 #-*- coding:utf-8 -*- __author__ = "MuT6 Sch01aR" import zipfile #加载模块 # 压缩 z = zipf ...

  9. 大端模式、小端模式和C#反转

    A.C#大端模式和小端模式. 小端(little-endian)模式:低地址上存放低字节,高地址上存放高字节. 如0x11223344→ byte[] numBytes = new byte[]{ 0 ...

  10. 09_java之面向对象概述

    01面向对象和面向过程的思想 * A: 面向过程与面向对象都是我们编程中,编写程序的一种思维方式 * a: 面向过程的程序设计方式,是遇到一件事时,思考“我该怎么做”,然后一步步实现的过程. * b: ...