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


Posted in jQuery onOctober 26, 2018

jQuery选择插件分为基本版和美化版,重点说下美化版,如下图所示:

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

相比最原始的版本,美化后的选择插件可以说是很漂亮了且功能更加强大(这里不说了,自行发掘吧)。这里主要是添加了它的特有属性并调用 class=”chzn-select”:

jsp页面:

<select class=”chzn-select” id="CODE" name="CODE">
  ......
</select>

js页面:

$(".chzn-select").chosen();

注意引用jQuery的js,有多种版本,建议使用高版本,如 jquery-1.9.1.min.js。

下面进入到主题,select绑定数据是很常见的,但大多数都是静态的或者数据确定的,这些其实都很好处理,我们需要的是动态绑定且多级关联的。

通过下面的实例来看看是如何一步步处理的:

这里我只选择二级关联,更复杂的大家可以在充分掌握后再自行研究。我们要实现的是点击一个select下拉框选择后,另一个select下拉框动态关联其对应的值,如下主select是省份,关联的select是城市,数据库分别存在省份和城市的表,省份表字段有SF_ID和SF_NAME,城市表字段有CY_ID,CY__NAME,CY_SFID(关联的省份ID):

<!-- 省份 -->
<select class="chzn-select" id="ShengFen" name="ShengFen" onChange="setCity();" data-placeholder="请选择省份">
  <option value=""></option>
  <option value="">全部</option>
  <c:foreach items="${sfList}" var="sf">
   <option value="${sf.SF_ID}" <c:if test="${pd.sfId == sf.SF_ID}">selected</c:if>>${sf.SF_NAME} 
   </option>
  </c:foreach>
</select>
<!-- 城市 -->
<select class="chzn-select" id="City" name="City" data-placeholder="请选择城市">
  <option value=""></option>
  <option value="">全部</option>
  <c:foreach items="${cyList}" var="cy">
   <option value="${cy.CY_ID}" <c:if test="${pd.cyId == cy.CY_ID}">selected</c:if>>${cy.CY_NAME} 
   </option>
  </c:foreach>
</select>

这里初始化的时候后台从数据库取数传值到页面,后台使用的是ModeView和PageData,大家视情况而定。

首先给主select省份添加onChange方法,表示选择更改的触发,即省份修改后城市对应的下拉框中的值也要变化,对应的处理方法是setCity(),我们使用ajax的方式来获取数据,如下在js中处理:

//下拉框动态关联
function setCity(){
  // 获取选择的省份的ID
  var sfId = $("#ShengFen").val();
  $.ajax({
   type : "POST",
   url : "SFAndCity/setCity.do",
   data : {"sfId":sfId},
   dataType : "json",
   success : function(data){
     var cyList = data.cyList;
     // 移除以前的绑定数据
     $("#City option").remove();
     // 美化一下select(可以去除)
     var _option = "<option value=\"\"";
     _option += "></option>";
     _option += "<option value=\"\"";
     _option += ">全部</option>";
     // 绑定数据
     if(cfList && cyList.length != 0){
       $("select[name=City]").append(_option);
       for(var i=0;i<cyList.length;i++){
        var option = "<option value=\""+cyList.CY_ID+"\"";
        option += ">"+cyList.CY_NAME+"</option>";
        $("select[name=City]").append(option);
       }
     }else{
       $("select[name=City]").append(_option);
     }
     // 保证jQuery的选择插件动态绑定数据生效
     $("#City").trigger("liszt:updated");
     $("#City").chosen();
   }
  });
}

最后就是后台的处理了,如下:

@RequestMapping(value="/setCity")
@ResponseBody
public Map<String,Object> setCity(){
  Map<String,Object> map = new HashMap<String,Object>();
  PageData pd = new PageData();
  try{
    pd = this.getPageData();
    String sfId = pd.getString("sfId"); //和ajax中传递的保持一致
    pd.put("CY_SFID",sfId);
    List<PageData> cyList = cyService.listCityBysfId(pd);
    map.put("cyList",cyList);  //和ajax中获取的保持一致
    return map;
  }catch(Exception e){
    
  }
  return map;
}

当然,上面关于数据的获取根据自己实际代码来编写,主要是获取数据并返回。

总结

以上所述是小编给大家介绍的jQuery Ajax实现Select多级关联动态绑定数据的实例代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

jQuery 相关文章推荐
jQuery扩展_动力节点Java学院整理
Jul 05 jQuery
jquery+css实现下拉列表功能
Sep 03 jQuery
jQuery选择器中的特殊符号处理方法
Sep 08 jQuery
基于jQuery解决ios10以上版本缩放问题
Nov 03 jQuery
(模仿京东用户注册)用JQuery实现简单表单验证,初学者必看
Jan 08 jQuery
jQuery实现碰到边缘反弹的动画效果
Feb 24 jQuery
jQuery滑动效果实现方法分析
Sep 05 jQuery
JS实现点击生成UUID的方法完整实例【基于jQuery】
Jun 12 jQuery
jquery 时间戳转日期过程详解
Oct 12 jQuery
jQuery实现移动端扭蛋机抽奖
Nov 08 jQuery
jQuery实现本地存储
Dec 22 jQuery
jQuery实现增删改查
Dec 22 jQuery
jquery使用FormData实现异步上传文件
Oct 25 #jQuery
jQuery+Datatables实现表格批量删除功能【推荐】
Oct 24 #jQuery
jQuery pagination分页示例详解
Oct 23 #jQuery
jquery.pagination.js分页使用教程
Oct 23 #jQuery
jquery分页插件pagination使用教程
Oct 23 #jQuery
使用jquery Ajax实现上传附件功能
Oct 23 #jQuery
jquery实现动态添加附件功能
Oct 23 #jQuery
You might like
PHP5.0正式发布 不完全兼容PHP4 新增多项功能
2006/10/09 PHP
php 一元分词算法
2009/11/30 PHP
解析php addslashes()与addclashes()函数的区别和比较
2013/06/24 PHP
php商品对比功能代码分享
2015/09/24 PHP
jQuery 性能优化指南(2)
2009/05/21 Javascript
javascript 弹出窗口中是否显示地址栏的实现代码
2011/04/14 Javascript
三种检测iPhone/iPad设备方向的方法
2014/04/23 Javascript
用javascript关闭本窗口技巧小结
2014/09/05 Javascript
Javascript函数式编程简单介绍
2015/10/11 Javascript
简单谈谈JavaScript的同步与异步
2015/12/31 Javascript
bootstrap学习笔记之初识bootstrap
2016/06/21 Javascript
AngularJS报错$apply already in progress的解决方法分析
2017/01/30 Javascript
javascript基本数据类型和转换
2017/03/17 Javascript
jQuery Tree Multiselect使用详解
2017/05/02 jQuery
vue+element+Java实现批量删除功能
2019/04/08 Javascript
JQuery Ajax如何实现注册检测用户名
2020/09/25 jQuery
vue实现顶部菜单栏
2020/11/08 Javascript
[54:05]DOTA2-DPC中国联赛定级赛 SAG vs iG BO3第一场 1月9日
2021/03/11 DOTA
Python实现短网址ShortUrl的Hash运算实例讲解
2015/08/10 Python
特征脸(Eigenface)理论基础之PCA主成分分析法
2018/03/13 Python
jupyter lab文件导出/下载方式
2020/04/22 Python
python单例模式的应用场景实例讲解
2021/02/24 Python
CSS3实现div从下往上滑入滑出效果示例
2020/04/28 HTML / CSS
html通过canvas转成base64的方法
2019/07/18 HTML / CSS
Oroton中国官网:澳洲知名奢侈配饰品牌
2017/03/26 全球购物
动物学专业毕业生求职信
2013/10/11 职场文书
市场部业务员岗位职责
2014/04/02 职场文书
代理协议书范本
2014/04/22 职场文书
教师三严三实心得体会
2014/10/11 职场文书
党员考试作弊检讨书1000字
2015/02/16 职场文书
2015年国际护士节演讲稿
2015/03/18 职场文书
工作态度恶劣检讨书
2015/05/06 职场文书
学校计划生育责任书
2015/05/09 职场文书
2019邀请函格式及范文
2019/05/20 职场文书
撤回我也能看到!教你用Python制作微信防撤回脚本
2021/06/11 Python
MySQL 自动填充 create_time 和 update_time
2022/05/20 MySQL