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插件HighCharts绘制简单2D柱状图效果示例【附demo源码】
Mar 21 jQuery
jQuery使用unlock.js插件实现滑动解锁
Apr 04 jQuery
jQuery Jsonp跨域模拟搜索引擎
Jun 17 jQuery
解决jquery appaend元素中id绑定事件失效的问题
Sep 12 jQuery
javascript+jQuery实现360开机时间显示效果
Nov 03 jQuery
jquery实现左右轮播切换效果
Jan 01 jQuery
关于jquery layui弹出层的使用方法
Apr 21 jQuery
jQuery实现下拉菜单动态添加数据点击滑出收起其他功能
Jun 14 jQuery
jQuery表单元素过滤选择器用法实例分析
Feb 20 jQuery
jQuery子选择器与可见性选择器实例分析
Jun 28 jQuery
jquery 回调操作实例分析【回调成功与回调失败的情况】
Sep 27 jQuery
jQuery 隐藏/显示效果函数用法实例分析
May 20 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
PHP面向对象分析设计的61条军规小结
2010/07/17 PHP
PHP调用MsSQL Server 2012存储过程获取多结果集(包含output参数)的详解
2013/07/03 PHP
jquery 实现表单验证功能代码(简洁)
2012/07/03 Javascript
理解JAVASCRIPT中hasOwnProperty()的作用
2013/06/05 Javascript
jQuery取得select选择的文本与值的示例
2013/12/09 Javascript
JavaScript中使用ActiveXObject操作本地文件夹的方法
2014/03/28 Javascript
JS+CSS实现带关闭按钮DIV弹出窗口的方法
2015/02/27 Javascript
JavaScript页面模板库handlebars的简单用法
2015/03/02 Javascript
js中实现字符串和数组的相互转化详解
2016/01/24 Javascript
基于Bootstrap模态对话框只加载一次 remote 数据的解决方法
2017/07/09 Javascript
Vue.js仿微信聊天窗口展示组件功能
2017/08/11 Javascript
vue中v-for加载本地静态图片方法
2018/03/03 Javascript
js传递数组参数到后台controller的方法
2018/03/29 Javascript
从vue源码解析Vue.set()和this.$set()
2018/08/30 Javascript
微信小程序之裁剪图片成圆形的实现代码
2018/10/11 Javascript
js尾调用优化的实现
2019/05/23 Javascript
JointJS JavaScript流程图绘制框架解析
2019/08/15 Javascript
k8s node节点重新加入master集群的实现
2021/02/22 Javascript
[03:47]2015国际邀请赛第三日现场精彩回顾
2015/08/08 DOTA
[32:26]EG vs IG 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
Python守护线程用法实例
2017/06/23 Python
numpy.delete删除一列或多列的方法
2018/04/03 Python
对python list 遍历删除的正确方法详解
2018/06/29 Python
解决Python print输出不换行没空格的问题
2018/11/14 Python
python实现scrapy爬虫每天定时抓取数据的示例代码
2021/01/27 Python
CSS实现限制字数功能当对象内文本溢出时显示省略标记
2014/08/20 HTML / CSS
如何用border-image实现文字气泡边框的示例代码
2020/01/21 HTML / CSS
H5 canvas中width、height和style的宽高区别详解
2018/11/02 HTML / CSS
HTMl5的存储方式sessionStorage和localStorage详解
2014/03/18 HTML / CSS
基于HTML5+Webkit实现树叶飘落动画
2017/12/28 HTML / CSS
人事部主管岗位职责
2013/12/26 职场文书
周鸿祎:教你写创业计划书
2013/12/30 职场文书
运动会通讯稿150字
2014/02/15 职场文书
推荐信格式范文
2014/05/09 职场文书
上海世博会志愿者口号
2014/06/17 职场文书
2019暑假阅读倡议书
2019/06/24 职场文书