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 11 jQuery
jQuery自定义元素右键点击事件(实现案例)
Apr 28 jQuery
JQuery实现图片轮播效果
May 08 jQuery
jQuery Validate表单验证插件实现代码
Jun 08 jQuery
文本溢出插件jquery.dotdotdot.js使用方法详解
Jun 22 jQuery
jQuery+HTML5实现WebGL高性能烟花绽放动画效果【附demo源码下载】
Aug 18 jQuery
利用jquery如何从json中读取数据追加到html中
Dec 01 jQuery
jquery自定义显示消息数量
Dec 19 jQuery
jQuery实现的简单拖拽功能示例【测试可用】
Aug 14 jQuery
jquery实现的简单轮播图功能【适合新手】
Aug 17 jQuery
jQuery超简单遮罩层实现方法示例
Sep 06 jQuery
jQuery动态操作表单示例【基于table表格】
Dec 06 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 动态执行带有参数的类方法
2009/04/10 PHP
PHP 字符截取 解决中文的截取问题,不用mb系列
2009/09/29 PHP
《PHP编程最快明白》第六讲:Mysql数据库操作
2010/11/01 PHP
PHP开发规范手册之PHP代码规范详解
2011/01/13 PHP
PHP中Fatal error session_start()错误解决步骤
2014/08/05 PHP
PHP基于SMTP协议实现邮件发送实例代码
2017/04/27 PHP
thinkPHP3.2使用RBAC实现权限管理的实现
2019/08/27 PHP
通过Jscript中@cc_on 语句识别IE浏览器及版本的代码
2011/05/07 Javascript
extjs tabpanel限制选项卡数量实现思路及代码
2013/04/02 Javascript
基于jquery实现的省市区级联无ajax
2013/09/24 Javascript
node.js中使用socket.io制作命名空间
2014/12/15 Javascript
vue中使用cropperjs的方法
2018/03/01 Javascript
微信小程序 slot踩坑的解决
2019/04/01 Javascript
vue 实现小程序或商品秒杀倒计时
2019/04/14 Javascript
Vue组件间通信方法总结(父子组件、兄弟组件及祖先后代组件间)
2019/04/17 Javascript
vue 取出v-for循环中的index值实例
2019/11/09 Javascript
浅谈Vue2.4.0 $attrs与inheritAttrs的具体使用
2020/03/08 Javascript
JavaScript ES6 Class类实现原理详解
2020/05/08 Javascript
Vue3 的响应式和以前有什么区别,Proxy 无敌?
2020/05/20 Javascript
JS实现audio音频剪裁剪切复制播放与上传(步骤详解)
2020/07/28 Javascript
一起来了解一下JavaScript的预编译(小结)
2021/03/01 Javascript
[05:39]2014DOTA2国际邀请赛 DK晋级胜者组专访战队国士无双
2014/07/14 DOTA
python解析html提取数据,并生成word文档实例解析
2018/01/22 Python
pandas.DataFrame 根据条件新建列并赋值的方法
2018/04/08 Python
python基础教程之while循环
2019/08/14 Python
利用Python的sympy包求解一元三次方程示例
2019/11/22 Python
Python中类似于jquery的pyquery库用法分析
2019/12/02 Python
python super函数使用方法详解
2020/02/14 Python
Numpy中ndim、shape、dtype、astype的用法详解
2020/06/14 Python
Python scrapy爬取小说代码案例详解
2020/07/09 Python
html5拖拽应用记录及注意点
2020/05/27 HTML / CSS
凯特·丝蓓英国官网:Kate Spade英国
2016/11/07 全球购物
工程质量承诺书
2014/03/27 职场文书
2016学习雷锋精神活动倡议书
2015/04/27 职场文书
nginx处理http请求实现过程解析
2021/03/31 Servers
python神经网络 使用Keras构建RNN训练
2022/05/04 Python