Jquery+Ajax实现Select动态添加数据
https://blog.csdn.net/zhengxiangwen/article/details/46480687
最近在工作中,遇到了一个关于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+Ajax实现Select动态添加数据的更多相关文章
- (转)Jquery+Ajax实现Select动态定数据
解决思路: 在数据库中建立类型字典式表.将下拉框需要添加的项,在数据库表里中文.英文名称对应起来. 下拉框动态绑定数据库表中需要字段. <div id="bgDiv" sty ...
- js表单动态添加数据并提交
情景1:已经存在form对象了,动态为form增加对象并提交 function formAppendSubmit(){ var myform=$('#newArticleForm'); //得到for ...
- 【javascript 动态添加数据到 HTML 页面】
今天简单的学习了一下有关对象字面量的定义和 javascript 如何取出对象字面量的值的知识,javascript 动态添加数据到 HTML 页面的问题. [学习目标]有如下的一组数据通过 Ajax ...
- 关于devexpress报表XtraReport,动态修改报表样式(.repx格式),动态添加数据并使用的理解
一.基本概念: XtraReports 中的每个报表都由 XtraRepot 类的一个实例表示,或者由该类的子类来表示(这种情况更常见). 因此,每个报表都作为带区的容器使用,而每个带区中都包含报表控 ...
- js对select动态添加和删除OPTION
<select id="ddlResourceType" onchange="getvalue(this)"> </select> 动态 ...
- JS对select动态添加options操作[IE&FireFox兼容]
<select id="ddlResourceType" onchange="getvalue(this)"> </select> 动态 ...
- 2016 系统设计第一期 (档案一)jQuery ajax serialize()方法form提交数据
jQuery ajax serialize()方法form提交数据,有个很奇怪的问题,好像不能取到隐藏控件的值. //点击提交按钮保存数据 $('#btn_submitUser').click(fun ...
- 第27讲 UI组件之 ScrollView与底部动态添加数据
第27讲 UI组件之 ScrollView与底部动态添加数据 1. ScrollView(滚动视图) ScrollView(滚动视图)是实现滚动的一个控件,只需要将需要滚动的控件添加到ScrollVi ...
- 使用js对select动态添加和删除OPTION示例代码
动态删除select中的所有options.某一项option以及动态添加select中的项option,在IE和FireFox都能测试成功,感兴趣的朋友可以参考下,希望对大家有所帮助 <s ...
随机推荐
- java之集合概述
集合也称容器:从大的类别分成两类:Collection和Map,也即:单列和双列列表. java编程思想中一张图说明该体系的整体结构:其中黑色着重的类是经常使用的类. 1 Collection Col ...
- Python 函数 -range()
range() pytho range() 函数可创建一个整数列表,一般用在 for 循环中. 语法: range(start, stop[, step]) start: 计数从 start 开始.默 ...
- Oracle之 等待事件log file sync + log file parallel write (awr优化)
这是3月份某客户的情况,原因是server硬件故障后进行更换之后,业务翻译偶尔出现提交缓慢的情况.我们先来看下awr的情况. 我们能够看到,该系统的load profile信息事实上并不高,每秒才21 ...
- Oracle在线新增索引
Oracle新增索引语法很简单,如果是普通索引的话: create Index IDX_T_WLF on T_WLF(ACTIVITYID,ACTIVETIME) tablespace TBS_VCO ...
- Android 系统四大组件
Android 系统四大组件分别是活动(Activity).服务(Service).广播接收器(Broadcast Receiver)和内容提供器(Content Provider). 活动是所有 A ...
- sql语句查询重复数据
select id, name, memofrom Awhere id in (select id from A group by id having count(1) >= 2)
- 第三章:Hadoop简介及配置Hadoop-1.2.1,hbase-0.94.13集群
前面给大家讲了怎么安装Hadoop,肯定会有人还是很迷茫,装完以后原来就是这个样子,但是怎么用,下面,先给大家讲下Hadoop简介:大致理解下就OK了 hadoop是一个平台,提供了庞大的存储和并行计 ...
- Python压缩及解压文件
Zip压缩 #-*- coding:utf-8 -*- __author__ = "MuT6 Sch01aR" import zipfile #加载模块 # 压缩 z = zipf ...
- 大端模式、小端模式和C#反转
A.C#大端模式和小端模式. 小端(little-endian)模式:低地址上存放低字节,高地址上存放高字节. 如0x11223344→ byte[] numBytes = new byte[]{ 0 ...
- 09_java之面向对象概述
01面向对象和面向过程的思想 * A: 面向过程与面向对象都是我们编程中,编写程序的一种思维方式 * a: 面向过程的程序设计方式,是遇到一件事时,思考“我该怎么做”,然后一步步实现的过程. * b: ...