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实现动态生成表格并为行绑定单击变色动作的方法
Apr 17 jQuery
jQuery实现多张图片上传预览(不经过后端处理)
Apr 29 jQuery
jQuery Validate表单验证插件实现代码
Jun 08 jQuery
jQuery初级教程之网站品牌列表效果
Aug 02 jQuery
jQuery 1.9版本以上的浏览器判断方法代码分享
Aug 28 jQuery
jQuery简单实现对数组去重及排序操作实例
Oct 31 jQuery
实现jquery放大镜的两种方法
Feb 22 jQuery
jQuery实现标签子元素的添加和赋值方法
Feb 24 jQuery
jQuery阻止事件冒泡实例分析
Jul 03 jQuery
JQuery事件委托(适用于给动态生成的脚本元素添加事件)
Feb 01 jQuery
jQuery使用jsonp实现百度搜索的示例代码
Jul 08 jQuery
jQuery实现B2B网站后台管理系统侧导航
Jul 08 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
计数器详细设计
2006/10/09 PHP
ThinkPHP令牌验证实例
2014/06/18 PHP
页面利用渐进式JPEG来提升用户体验度
2014/12/01 PHP
PHP连接MYSQL数据库实例代码
2016/01/20 PHP
PHP实现简易blog的制作
2016/10/24 PHP
jquery tab标签页的制作
2010/05/10 Javascript
JQuery工具函数汇总
2015/06/15 Javascript
jquery简单实现幻灯片的方法
2015/08/03 Javascript
javascript 使用for循环时该注意的问题-附问题总结
2015/08/19 Javascript
快速入门Vue
2016/12/19 Javascript
使用JavaScript实现一个小程序之99乘法表
2017/09/21 Javascript
vue.js中引入vuex储存接口数据及调用的详细流程
2017/12/14 Javascript
vue中echarts3.0自适应的方法
2018/02/26 Javascript
vue集成百度UEditor富文本编辑器使用教程
2018/09/21 Javascript
js中的reduce()函数讲解
2019/01/18 Javascript
浅谈JS的原型和继承
2019/05/08 Javascript
谈谈我在vue-cli3中用预渲染遇到的坑
2020/04/22 Javascript
python基础教程之自定义函数介绍
2014/08/29 Python
详解django中自定义标签和过滤器
2017/07/03 Python
python list删除元素时要注意的坑点分享
2018/04/18 Python
浅析Python 3 字符串中的 STR 和 Bytes 有什么区别
2018/10/14 Python
对Python 3.5拼接列表的新语法详解
2018/11/08 Python
解决pycharm每次新建项目都要重新安装一些第三方库的问题
2019/01/17 Python
Python3中exp()函数用法分析
2019/02/19 Python
python使用 zip 同时迭代多个序列示例
2019/07/06 Python
代码总结Python2 和 Python3 字符串的区别
2020/01/28 Python
Python接口自动化判断元素原理解析
2020/02/24 Python
PHP笔试题
2012/02/22 面试题
测绘工程专业个人自我评价
2013/12/01 职场文书
信息管理应届生求职信
2014/03/07 职场文书
学校联谊协议书
2014/09/16 职场文书
反四风个人对照检查材料
2014/09/26 职场文书
2014年客户经理工作总结
2014/11/20 职场文书
推销搭讪开场白
2015/05/28 职场文书
2016年“七一建党节”广播稿
2015/12/18 职场文书
在HTML5 localStorage中存储对象的示例代码
2021/04/21 Javascript