jsp ajax动态添加数据,jquery Ajax实现Select动态添加数据

jquery Ajax实现Select动态添加数据，具体内容如下

1.背景

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

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

*车系

然后，是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

var option="

if(_LastModelId && _LastModelId==modelList[i].modelId){

option += " selected=\"selected\" "; //默认选中

_LastModelId=null;

}

option += ">"+modelList[i].modelName+"

"; //动态添加数据

$("select[name=modelId]").append(option);

}

});

}

最后，是后台代码：

@RequestMapping("/getModelList")

@ResponseBody

public Map getModelList(Integer brandId) {

List modelList = null;

try{

modelList = carInfoManager.getSrmsModelListByBrandId(brandId);

}catch(Exception e){

LOGGER.error("获取年租车辆型号异常:{}", e.getMessage());

}

Map returnMap = Maps.newHashMap();

returnMap.put("modelList", modelList);

return returnMap;

}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

jsp ajax动态添加数据,jquery Ajax实现Select动态添加数据相关推荐

Java项目:嘟嘟校园一卡通系统(java+JSP+Servlet+html+css+JavaScript+JQuery+Ajax+mysql)
源码获取:博客首页 "资源" 里下载! 一.项目简述功能:卡管理,卡消费,卡充值,图书借阅,消费,记录,注销等等功能. 二.项目运行环境配置: Jdk1.8 + Tomcat8 ...
jquery ajax json传递数组,jQuery ajax 传递JSON数组到Spring Controller
jQuery ajax传递单个JSON对象到后台很容易,这里记录的是传递多个JSON对象组成的JSON数组到java 后台,并说明java如何解析JSON数组. 1.js代码 var relation ...
ajax send报错,jquery ajax beforeSend 提交等待问题
需要使用异步加载async : true 否则不会出现等待效果 $.ajax({ url : $('#form').attr("action"), data: $('#form') ...
Ajax如何设置contenttype,jquery ajax contentType设置
默认get方法没有contentType,post方法的contentType为:application/x-www-form-urlencoded; charset=UTF-8 (1) 设置成app ...
ajax 怎么input赋值,jQuery ajax请求返回list数据动态生成input标签,并把list数据赋值到input标签...
jQuery ajax请求返回list数据动态生成input标签,并把list数据赋值到input标签发布于 2016-11-25 16:26:40 | 111 次阅读 | 评论: 0 | 来源: ...
ajax往CJJTable传值,jQuery+ajax怎么样实现动态数据分页
这次给大家带来jQuery+ajax怎么样实现动态数据分页,用jQuery+ajax实现动态数据分页的注意事项有哪些,下面就是实战案例,一起来看一下. 用jQuery实现页码跳转式动态数据分页这个效果 ...
ajax 跨域请求数据,JQuery Ajax执行跨域请求数据的解决方案
JQuery Ajax执行跨域请求数据的解决方案今天前端因为需要ajax调用两个不同的项目,请求域不一样,所以涉及ajax跨域的问题 ,其实很简单,具体如下原来的ajax请求如下: $.ajax( ...
ajax请求获取服务器数据,jquery.ajax发布从app引擎服务器获取数据的请求
为noob问题道歉...... 您好,如何使用jQuery.ajax从appengine服务器的Python端获取数据?我知道如何使用ajax和适当的处理程序将数据发送到服务器,但我想知道是否有人可以 ...
ajax json 渲染 html,jQuery+Ajax+js实现请求json格式数据并渲染到html页面操作示例
本文实例讲述了jquery+ajax+js实现请求json格式数据并渲染到html页面操作.分享给大家供大家参考,具体如下: 1.先给json格式的数据: [ {"id":1,&q ...

jsp ajax动态添加数据,jquery Ajax实现Select动态添加数据

jsp ajax动态添加数据,jquery Ajax实现Select动态添加数据相关推荐

最新文章

热门文章