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;
 }

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

赞 (0)

相关推荐

  • lyhucSelect基于Jquery的Select数据联动插件

    lyhucSelect基于Jquery的Select数据联动插件

    数据源: 复制代码 代码如下: var areaInfo = new Array(); areaInfo[0] = new Array(); areaInfo[0][0]="1"; areaInfo[0][1]="Beijing"; areaInfo[0][2]="0"; areaInfo[0][3]="0"; areaInfo[1] = new Array(); areaInfo[1][0]="2"; a

  • jQuery插件select2利用ajax高效查询大数据列表（可搜索、可分页）

    jQuery插件select2利用ajax高效查询大数据列表（可搜索、可分页）

    select2是一款jQuery插件,是普通form表单select组件的升级版. 可以定制搜索.远程数据集(Remote data,本篇主要介绍点).无限滚动(数据分页功能,这一点很妙).还有很多高端的参数设置(有需要的下次介绍). 内置了40种国际化语言,不过这里我们只需要用到中文. 同时支持现代和传统浏览器内置,甚至包括惹人不高兴的IE8. 那么,现在让我们开始一段select2的奇幻之旅吧! 一.惊艳的效果,来一睹为快吧 本地实战结果 二.导入css和js到网站上 1.使用CDN,节省自

  • jquery通过select列表选择框对表格数据进行过滤示例

    jquery通过select列表选择框对表格数据进行过滤 表格数据 复制代码 代码如下: <table id="example">    <thead>        <tr>            <th>Name</th>            <th>Surname</th>        </tr>    </thead>    <tbody>       

  • 使用CSS和jQuery模拟select并附提交后取得数据的代码

    使用CSS和jQuery模拟select并附提交后取得数据的代码

    模拟select 并带有提交后取得数据的代码  HTML Code 复制代码 代码如下: <div id="dropdown"> <p>请选择城市</p> <ul> <li><a href="#" rel="2">北京</a></li> <li><a href="#" rel="3">上海

  • jquery Ajax实现Select动态添加数据

    jquery Ajax实现Select动态添加数据,具体内容如下 1.背景  最近在工作中,遇到了一个关于select的问题.一般情况下,select下拉框中的数据都是固定的或者直接在jsp中读取列表值显示.但是,这次要实现select与别的选项框联动,也就是要动态添加option数据.查阅了很多资料,终于搞定.下面就分享一下,如何利用jQuery和Ajax实现select动态添加数据. 2.本文代码实现的是车辆型号根据车辆品牌联动显示的功能.首先,是jsp中的车辆品牌定义,这个很简单.如下:

  • JQuery Ajax 异步操作之动态添加节点功能

    异步操作动态添加节点,导致在代码中给添加的节点全局绑定事件或者获取元素无效,上代码: $(function () { var IP = '...'; // 页面中的默认编号起始值 和 公用IP前缀 showData(); function showData() { if ($('.content')) $('.content').remove(); $.ajax({ url:IP + '/get', type:'get', success:function (data) { var newInf

  • jQuery实现表单动态添加数据并提交的方法

    本文实例讲述了jQuery实现表单动态添加数据并提交的方法.分享给大家供大家参考,具体如下: 情景1:已经存在form对象了,动态为form增加对象并提交 function formAppendSubmit(){ var myform=$('#newArticleForm'); //得到form对象 var tmpInput=$("<input type='text' name='blogArticleForm.articleContent'/>"); tmpInput.a

  • jQuery 实时保存页面动态添加的数据的示例

    本文介绍了jQuery 实时保存页面动态添加的数据的示例,分享给大家,具体如下: 需求:用户填写的东西,必须要实时保存 分析:监听用户操作事件,如:change.keyup 等,向后端发送请求 实际情况: 用户填写的表单,是通过 JavaScript 动态新增的,这就需要使用为动态新增元素绑定事件. 发送请求给后端,取决于前面的必填项是否已经完整填写. 必须区分用户是动态新增了填写栏目呢?还是在修改? 当前事件对象是什么?怎么通过该对象获取用户输入的数据? 用户多次修改同一栏目,必须传送带有 I

  • jQuery Ajax实现Select多级关联动态绑定数据的实例代码

    jQuery选择插件分为基本版和美化版,重点说下美化版,如下图所示: 相比最原始的版本,美化后的选择插件可以说是很漂亮了且功能更加强大(这里不说了,自行发掘吧).这里主要是添加了它的特有属性并调用 class="chzn-select": jsp页面: <select class="chzn-select" id="CODE" name="CODE"> ...... </select> js页面: $(

  • jQuery实现下拉菜单动态添加数据点击滑出收起其他功能

    jQuery实现下拉菜单动态添加数据点击滑出收起其他功能

    上面的人要hui admin  做页面,本人前端比较菜,这框架也没用过. 因为是动态添加数据 .表也没有,..然后子菜单列表只能通过字符串拼接的方式显示. (伪造的)数据是传过来了 发现这个框架的点击菜单,子菜单滑出的效果触发不了,应该是封装了吧..反正不会引用.就自己写了个点击事件(,列表格式还是参照模板). ①:请求数据+ul拼接 比较糙,两边icon 无力回天,不过功能是实现了 $.ajax({ url:'/type/reportType', data:{"token":getC

  • jQuery实现表单动态添加与删除数据操作示例

    jQuery实现表单动态添加与删除数据操作示例

    本文实例讲述了jQuery实现表单动态添加与删除数据操作.分享给大家供大家参考,具体如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>用户名注册</title> <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js

  • 利用js给datalist或select动态添加option选项的方法

    有时需要从配置文件中读取信息,然后添加到用户的选择项中,比如select的option选项,下面针对此类情况做了一个实例 内容如下: <!DOCTYPE html> <html> <head> <title>鼠标点击时加载</title> <script type="text/javascript" src="jquery-1.8.3.js"></script> </head&

  • JavaScript动态添加数据到表单并提交的几种方式

    情景1:已经存在form对象了,动态为form增加对象并提交 function formAppendSubmit(){ var myform=$('#newArticleForm'); //得到form对象 var tmpInput=$("<input type='text' name='blogArticleForm.articleContent'/>"); tmpInput.attr("value", myUeditor.window.getCont

  • jQuery实现的简单动态添加、删除表格功能示例

    jQuery实现的简单动态添加、删除表格功能示例

    本文实例讲述了jQuery实现的简单动态添加.删除表格功能.分享给大家供大家参考,具体如下: 先来看看运行效果: 具体代码如下: <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>www.jb51.net 我们</title> <style> * { padding: 0; margin: 0;

随机推荐