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实现全选、全不选以及单选功能
Mar 23 jQuery
jQuery编写textarea输入字数限制代码
Mar 23 jQuery
原生Aajax 和jQuery Ajax 写法个人总结
Mar 24 jQuery
jQuery实现返回顶部按钮和scroll滚动功能[带动画效果]
Jul 05 jQuery
jQuery事件_动力节点Java学院整理
Jul 05 jQuery
jQuery完成表单验证的实例代码(纯代码)
Sep 30 jQuery
jQuery实现鼠标响应式透明度渐变动画效果示例
Feb 13 jQuery
jQuery 实现倒计时天,时,分,秒功能
Jul 31 jQuery
jQuery插件实现的日历功能示例【附源码下载】
Sep 07 jQuery
利用jquery和BootStrap实现动态滚动条效果
Dec 03 jQuery
基于ajax及jQuery实现局部刷新过程解析
Sep 12 jQuery
jQuery实现简单飞机大战
Jul 05 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
动态生成gif格式的图像要注意?
2006/10/09 PHP
整理php防注入和XSS攻击通用过滤
2015/09/13 PHP
Yii2中简单的场景使用介绍
2017/06/02 PHP
只需20行代码就可以写出CSS覆盖率测试脚本
2013/04/24 Javascript
js open() 与showModalDialog()方法使用介绍
2013/09/10 Javascript
页面装载js及性能分析方法介绍
2014/03/21 Javascript
利用原生JS与jQuery实现数字线性变化的动画
2017/02/24 Javascript
JavaScript观察者模式(publish/subscribe)原理与实现方法
2017/03/30 Javascript
js中apply与call简单用法详解
2017/11/06 Javascript
node+koa2+mysql+bootstrap搭建一个前端论坛
2018/05/06 Javascript
Angularjs实现数组随机排序的方法
2018/10/02 Javascript
Vue实现商品分类菜单数量提示功能
2019/07/26 Javascript
vue+layui实现select动态加载后台数据的例子
2019/09/20 Javascript
非常漂亮的js烟花效果
2020/03/10 Javascript
javascript设计模式 ? 外观模式原理与用法实例分析
2020/04/15 Javascript
单线程JavaScript实现异步过程详解
2020/05/19 Javascript
[01:38]完美世界DOTA2联赛(PWL)宣传片:第一站
2020/10/26 DOTA
python3编写C/S网络程序实例教程
2014/08/25 Python
python+mongodb数据抓取详细介绍
2017/10/25 Python
python表格存取的方法
2018/03/07 Python
利用Pandas读取文件路径或文件名称包含中文的csv文件方法
2018/07/04 Python
Python中pip更新和三方插件安装说明
2018/07/08 Python
Python英文文本分词(无空格)模块wordninja的使用实例
2019/02/20 Python
django基于cors解决跨域请求问题详解
2019/08/06 Python
Python SMTP配置参数并发送邮件
2020/06/16 Python
Python classmethod装饰器原理及用法解析
2020/10/17 Python
HTML5 实战PHP之Web页面表单设计
2011/10/09 HTML / CSS
英国团购网站:Groupon英国
2017/11/28 全球购物
安全资金保障制度
2014/01/23 职场文书
护理目标管理责任书
2014/07/25 职场文书
医院领导班子四风对照检查材料
2014/09/27 职场文书
市场营销计划书
2015/01/17 职场文书
小学推普周活动总结
2015/05/07 职场文书
小学六年级毕业感言
2015/07/30 职场文书
2016年教师政治思想表现评语
2015/12/02 职场文书
MYSQL(电话号码,身份证)数据脱敏的实现
2021/05/28 MySQL