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的ajax实现二级联动效果
Jul 13 jQuery
jQuery 实现鼠标画框并对框内数据选中的实例代码
Aug 29 jQuery
解决html-jquery/js引用外部图片时遇到看不了或出现403的问题
Sep 22 jQuery
jQuery实现点击下拉框中的值累加到文本框中的方法示例
Oct 28 jQuery
jquery写出PC端轮播图实例
Jan 26 jQuery
使用jQuery给Table动态增加行、清空table的方法
Sep 05 jQuery
jQuery实现基本淡入淡出效果的方法详解
Sep 05 jQuery
详解JQuery基础动画操作
Apr 12 jQuery
jQuery实现全选、反选和不选功能的方法详解
Dec 04 jQuery
jquery实现弹窗(系统提示框)效果
Dec 10 jQuery
jquery实现烟花效果(面向对象)
Mar 10 jQuery
jQuery实现放大镜案例
Oct 19 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面向对象分析设计的经验原则
2008/09/20 PHP
PHP 日期加减的类,很不错
2009/10/10 PHP
PHP控制前台弹出对话框的实现方法
2016/08/21 PHP
PHP从零开始打造自己的MVC框架之路由类实现方法分析
2019/06/03 PHP
js自带函数备忘 数组
2006/12/29 Javascript
一个级联菜单代码学习及removeClass与addClass的应用
2013/01/24 Javascript
js创建对象的方法汇总
2016/01/07 Javascript
jQuery插件fullPage.js实现全屏滚动效果
2016/12/02 Javascript
JavaScript运动框架 链式运动到完美运动(五)
2017/05/18 Javascript
ionic环境配置及问题详解
2017/06/27 Javascript
jquery.validate.js 多个相同name的处理方式
2017/07/10 jQuery
jQuery中each循环的跳出和结束实例
2017/08/16 jQuery
详解如何使用webpack打包JS
2018/06/21 Javascript
JavaScript数据结构与算法之基本排序算法定义与效率比较【冒泡、选择、插入排序】
2019/02/21 Javascript
一百行JS代码实现一个校验工具
2019/04/30 Javascript
Node.JS在命令行中检查Chrome浏览器是否安装并打开指定网址
2019/05/21 Javascript
JavaScript怎样在删除前添加确认弹出框?
2019/05/27 Javascript
electron+vue实现div contenteditable截图功能
2020/01/07 Javascript
Python基于回溯法子集树模板实现图的遍历功能示例
2017/09/05 Python
Python 旋转打印各种矩形的方法
2019/07/09 Python
jupyter notebook 参数传递给shell命令行实例
2020/04/10 Python
基于matplotlib xticks用法详解
2020/04/16 Python
Python小白学习爬虫常用请求报头
2020/06/03 Python
PyTorch: Softmax多分类实战操作
2020/07/07 Python
HTML5 Canvas阴影使用方法实例演示
2013/08/02 HTML / CSS
Marmot土拨鼠官网:美国专业户外运动品牌
2018/01/11 全球购物
Theory美国官网:后现代都市风时装品牌
2018/05/09 全球购物
女子锻炼服装和瑜伽服装:Splits59
2019/03/04 全球购物
社区志愿者心得体会
2014/01/03 职场文书
大学军训感言
2014/01/10 职场文书
企业车辆管理制度
2014/01/24 职场文书
大家访活动实施方案
2014/03/10 职场文书
合同协议书格式
2014/04/18 职场文书
仓库管理员岗位职责
2015/02/03 职场文书
物业保安辞职信
2015/05/12 职场文书
flex弹性布局详解
2022/03/20 HTML / CSS