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  # Ajax  # Select  # 数据  # BootStrap selectpicker后台动态绑定数据的方法  # BootStrap selectpicker后台动态绑定数据  # jquery动态加载select下拉框示例代码  # 利用js将ajax获取到的后台数据动态加载至网页中的方法  # AJAX 动态加载后台数据 绑定select的方法  # 的是  # 都是  # 很简单  # 租车  # 在工作中  # 具体内容  # 框中  # 大家多多  # 清空  # 车系  # style  # var  # getModelList  # row  # form  # span  # gt  # white  # modelId  # js 

相关栏目： 【 网站优化151355 】 【 网络推广146373 】 【 网络技术251813 】 【 AI营销90571 】

相关推荐： ,交易猫的商品怎么发布到网站上去？  千问怎样用提示词获取健康建议_千问健康类提示词注意事项【指南】  laravel怎么配置和使用PHP-FPM来优化性能_laravel PHP-FPM配置与性能优化方法  电视网站制作tvbox接口,云海电视怎样自定义添加电视源？  如何在云虚拟主机上快速搭建个人网站？  Laravel的.env文件有什么用_Laravel环境变量配置与管理详解  Swift中swift中的switch 语句  C语言设计一个闪闪的圣诞树  网站制作怎么样才能赚钱,用自己的电脑做服务器架设网站有什么利弊，能赚钱吗？  香港服务器选型指南：免备案配置与高效建站方案解析  使用豆包 AI 辅助进行简单网页 HTML 结构设计  电商网站制作价格怎么算,网上拍卖流程以及规则？  Laravel如何使用Vite进行前端资源打包？（配置示例）  图片制作网站免费软件,有没有免费的网站或软件可以将图片批量转为A4大小的pdf？  Laravel怎么生成二维码图片_Laravel集成Simple-QrCode扩展包与参数设置【实战】  Laravel如何处理表单验证？（Requests代码示例）  html文件怎么打开证书错误_https协议的html打开提示不安全【指南】  Android中Textview和图片同行显示(文字超出用省略号，图片自动靠右边)  如何自定义建站之星模板颜色并下载新样式？  中国移动官方网站首页入口 中国移动官网网页登录  Java解压缩zip - 解压缩多个文件或文件夹实例  javascript读取文本节点方法小结  微信公众帐号开发教程之图文消息全攻略  logo在线制作免费网站在线制作好吗,DW网页制作时，如何在网页标题前加上logo？  黑客如何通过漏洞一步步攻陷网站服务器？  如何在建站主机中优化服务器配置？  专业商城网站制作公司有哪些,pi商城官网是哪个？  Laravel Vite是做什么的_Laravel前端资源打包工具Vite配置与使用  Laravel Session怎么存储_Laravel Session驱动配置详解  Python高阶函数应用_函数作为参数说明【指导】  如何在建站之星网店版论坛获取技术支持？  如何将凡科建站内容保存为本地文件？  Laravel队列由Redis驱动怎么配置_Laravel Redis队列使用教程  专业企业网站设计制作公司,如何理解商贸企业的统一配送和分销网络建设？  湖南网站制作公司,湖南上善若水科技有限公司做什么的？  网站视频制作书签怎么做,ie浏览器怎么将网站固定在书签工具栏？  音响网站制作视频教程,隆霸音响官方网站？  Win11怎么关闭资讯和兴趣_Windows11任务栏设置隐藏小组件  网站制作价目表怎么做,珍爱网婚介费用多少？  如何快速上传建站程序避免常见错误？  laravel怎么实现图片的压缩和裁剪_laravel图片压缩与裁剪方法  香港网站服务器数量如何影响SEO优化效果？  移动端手机网站制作软件,掌上时代，移动端网站的谷歌SEO该如何做？  谷歌Google入口永久地址_Google搜索引擎官网首页永久入口  ChatGPT回答中断怎么办 引导AI继续输出完整内容的方法  iOS验证手机号的正则表达式  国美网站制作流程,国美电器蒸汽鍋怎么用官方网站？  如何用IIS7快速搭建并优化网站站点？  油猴 教程,油猴搜脚本为什么会网页无法显示？  购物网站制作费用多少,开办网上购物网站，需要办理哪些手续？