zoukankan      html  css  js  c++  java
  • Jquery+Ajax实现Select动态添加数据

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

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

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

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

    然后,是JS代码:

    [javascript] view plain copy
     
    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. }  

    最后,是后台代码:

    [java] view plain copy
     
    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
  • 相关阅读:
    Mysql登录错误:ERROR 1045 (28000): Plugin caching_sha2_password could not be loaded
    Docker配置LNMP环境
    Docker安装mysqli扩展和gd扩展
    Docker常用命令
    Ubuntu常用命令
    单例模式的优缺点和使用场景
    ABP 多租户数据共享
    ABP Core 后台Angular+Ng-Zorro 图片上传
    ERROR Error: If ngModel is used within a form tag, either the name attribute must be set or the form control must be defined as 'standalone' in ngModelOptions.
    AbpCore 执行迁移文件生成数据库报错 Could not find root folder of the web project!
  • 原文地址:https://www.cnblogs.com/javaboy2018/p/9173214.html
Copyright © 2011-2022 走看看