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使用unlock.js插件实现滑动解锁
Apr 04 jQuery
jQuery实现动态添加、删除按钮及input输入框的方法
Apr 27 jQuery
简单实现jQuery上传图片显示预览功能
Jun 29 jQuery
jQuery使用bind函数实现绑定多个事件的方法
Oct 11 jQuery
jQuery实现的鼠标响应缓冲动画效果示例
Feb 13 jQuery
jquery点击回车键实现登录效果并默认焦点的方法
Mar 09 jQuery
jQuery实现的响应鼠标移动方向插件用法示例【附源码下载】
Aug 28 jQuery
jQuery实现的隔行变色功能【案例】
Feb 18 jQuery
JS/jQuery实现超简单的Table表格添加,删除行功能示例
Jul 31 jQuery
jQuery 筛选器简单操作示例
Oct 02 jQuery
js判断复选框是否选中的方法示例【基于jQuery】
Oct 10 jQuery
jquery实现图片无缝滚动 蒙版遮蔽效果
Jan 11 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新手上路(十三)
2006/10/09 PHP
thinkPHP5.0框架引入Traits功能实例分析
2017/03/18 PHP
PHP实现广度优先搜索算法(BFS,Broad First Search)详解
2017/09/16 PHP
php提取微信账单的有效信息
2018/10/01 PHP
PHP7生产环境队列Beanstalkd用法详解
2020/05/19 PHP
PHP获取真实IP及IP模拟方法解析
2020/11/24 PHP
详细解读JavaScript的跨浏览器事件处理
2015/08/12 Javascript
jQuery中fadein与fadeout方法用法示例
2016/09/16 Javascript
vue.js实现仿原生ios时间选择组件实例代码
2016/12/21 Javascript
详解用vue.js和laravel实现微信支付
2017/06/23 Javascript
AngularJs用户登录问题处理(交互及验证、阻止FQ处理)
2017/10/26 Javascript
在vue.js中使用JSZip实现在前端解压文件的方法
2018/09/05 Javascript
Python创建系统目录的方法
2015/03/11 Python
Python的函数的一些高阶特性
2015/04/27 Python
设计模式中的原型模式在Python程序中的应用示例
2016/03/02 Python
python正则表达式之作业计算器
2016/03/18 Python
python 第三方库的安装及pip的使用详解
2017/05/11 Python
用Python下载一个网页保存为本地的HTML文件实例
2018/05/21 Python
python二维列表一维列表的互相转换实例
2018/07/02 Python
浅谈django三种缓存模式的使用及注意点
2018/09/30 Python
在python2.7中用numpy.reshape 对图像进行切割的方法
2018/12/05 Python
python选取特定列 pandas iloc,loc,icol的使用详解(列切片及行切片)
2019/08/06 Python
python处理自动化任务之同时批量修改word里面的内容的方法
2019/08/23 Python
Windows系统下pycharm中的pip换源
2020/02/23 Python
Python操作MongoDb数据库流程详解
2020/03/05 Python
python实现npy格式文件转换为txt文件操作
2020/07/01 Python
Dr. Martens马汀博士官网:马丁靴始祖品牌
2016/10/15 全球购物
JAVA代码查错题
2014/10/10 面试题
幼儿师范毕业生自荐信
2013/11/09 职场文书
广告传媒专业应届生求职信
2014/03/01 职场文书
小学校长汇报材料
2014/08/20 职场文书
《日月潭》教学反思
2016/02/20 职场文书
Matlab求解数组中的最大值及它所在的具体位置
2021/04/16 Python
如何用JavaScipt测网速
2021/05/09 Javascript
解决SpringCloud Feign传对象参数调用失败的问题
2021/06/23 Java/Android
【js设计模式】SOLID五大设计原则
2022/03/24 Javascript