Jquery 实现select 3级级联查询
实现级联效果的思路：
1、 页面加载时，先显示第一级select，第二、三级的select隐藏，根据第一级select值的改变，再显示第二级select，依次类推；
2、只从后台获取第一级select的数据，第二级select的选项数据根据第一级select值的改变再动态更新，第三级select的选项数据再根据第二级select值的改变再做动态更新；
一、基于Jquery的jsp实现步骤：
1、页面引入Jquery插件：
<script src="${pageContext.request.contextPath}/resources/js/jquery-3.0.0.min.js"></script>
2、页面加入三级的select标签：
<!-- 一级select -->
<div >
<select id="select-first" name="categoryId" data-getDataUrl="${pageContext.request.contextPath}/admin/spu/spu/getsonCategory">
<option value=''>请选择分类</option>
<c:forEach items="${rootCategorys}" var="rootCategory" varStatus="statu">
<option value="${rootCategory.id}" ${params.firstValue ==rootCategory.id ? 'selected="selected"' :''} >${rootCategory.categoryName}</option>
</c:forEach>
</select>
</div>
<!-- 二级select -->
<div id="box-select-second" style="display:none;" >
<select id="select-second" name="sonCategoryId" data-getDataUrl="${pageContext.request.contextPath}/admin/spu/spu/getsonCategory" > </select>
</div>
<!-- 三级select -->
<div id="box-select-third" style="display:none;" >
<select id="select-third" name="grandsoncategoryId" data-getDataUrl="${pageContext.request.contextPath}/admin/spu/spu/getsonCategory" > </select>
</div>
3、使用jquery的change()方法,可以监听select的值一旦发生改变，就触发事件；
使用$.ajax()异步方法请求后台数据，成功返回数据添加到下级select选项中：
//级联select:一级select的值发生改变，触发二级的选项改变
$("#select-first").change(function(){
//清空二级和三级select的旧选项
$("#select-second").empty();
$("#select-third").empty();
//请求二级select选项数据地址
var targetUrl = $(this).attr("data-getDataUrl");
//获得一级select的值
var firstValue = $(this).val();
//如果一级select的值为null，隐藏二、三级select,并返回
if(firstValue == ''){
$("#select-second").fadeOut("slow");
$("#select-third").fadeOut("slow");
return;
} //根据一级select的值，异步获取数据更新二级的选项
$.ajax({
type:'get',
url:targetUrl,
data:{
parentId:firstValue
},
cache:false,
dataType:'json',
success:function(secondDatas){ //遍历回传的数据添加到二级select
$.each(secondDatas, function(key, secondData) { var option = '<option value="'+secondData.id+'">'+secondData.categoryName+'</option>'
$("#select-second").append(option) }) //二级select展示
$("#box-select-second").fadeIn("slow");
//三级select隐藏
$("#box-select-third").fadeOut("slow");
},
error:function(){
alert("请求失败")
}
});
}); //级联select:二级select值改变，触发三级select变化
$("#select-second").change(function(){
//清空三级slect的旧选项
$("#select-third").empty();
//请求二级select选项数据地址
var targetUrl = $(this).attr("data-getDataUrl");
//二级select的值
var secondValue = $(this).val();
//如果一级select的值为null，隐藏三级select,并返回
if(secondValue == ''){
$("#select-third").fadeOut("slow");
return;
}
//根据二级select的值，异步获取数据更新三级的选项
$.ajax({
type:'get',
url:targetUrl,
data:{
parentId:secondValue
},
cache:false,
dataType:'json',
success:function(thirdDatas){ //遍历回传的数据添加到三级select
$.each(thirdDatas, function(key, thirdData) { var option = '<option value="'+thirdData.id+'">'+thirdData.categoryName+'</option>'
$("#select-third").append(option) }) //三级select显示出来
$("#box-select-third").fadeIn("slow");
},
error:function(){
alert("请求失败")
}
});
});
4、后台是使用spring-mvc框架，前端ajax异步请求下级select数据在后台的相关实现是：
/**
* 获得子分类
* @param parentId
* @return
*/
@RequestMapping(value="getsonCategory",method =RequestMethod.GET)
@ResponseBody
public List<TShopCategory> getsonCategory(Long parentId) { List<TShopCategory> sonCategorys =categoryService.getChildrenCategorys(parentId); return sonCategorys;
}
ajax发送select的值和请求地址到后台，后台响应成功后回传子分类的集合给前端，
前端以json格式获得，前端使用Jquery的$.each遍历分类集合，生成<option>标签，使用append()方法将新生成的<option>标签添加到下级的select当中。
下图为实现效果图：
这是只基于Jquery的 三级select级联查询，没有任何美化和增强功能，下面介绍基于bootstrap框架+bootstrap-select组件的三级select级联查询功能，
美化select选择框和增加选项搜索。
二、基于Jquery、bootstrap框架、bootstrap-select组件，实现三级查询步骤：
1、在jsp引入相关文件（bootstrap-select组件依赖于bootstrap框架，bootstrap框架依赖于Jquery）：
<!-- 引入 Bootstrap 样式-->
<link href="${pageContext.request.contextPath}/resources/css/bootstrap.min.css" rel="stylesheet">
<!-- select样式 -->
<link href="${pageContext.request.contextPath}/resources/css/select/bootstrap-select.min.css" rel="stylesheet"> <!-- jQuery (Bootstrap 需要引入 jQuery) -->
<script src="${pageContext.request.contextPath}/resources/js/jquery-3.0.0.min.js"></script>
<!-- bootstrap插件 -->
<script src="${pageContext.request.contextPath}/resources/js/bootstrap.min.js"></script>
<!-- bootstrap-select组件 -->
<script src="${pageContext.request.contextPath}/resources/js/select/bootstrap-select.min.js"></script>
<script src="${pageContext.request.contextPath}/resources/js/select/defaults-zh_CN.min.js"></script>
2、jsp加入3级的select：
<!--搜索栏-->
<form id="listForm" class="row" action="" method = "GET">
<div class="col-md-12 ">
<div class="form-group col-md-2 " id="spu-select-firstCategory">
<!-- 一级select -->
<select class="form-control selectpicker show-tick reset" id="select-first" title="请选择分类" name="firstValue" data-getDataUrl="${pageContext.request.contextPath}/admin/spu/spu/getsonCategory" data-live-search="true" data-size="6">
<c:forEach items="${rootCategorys}" var="rootCategory" varStatus="statu">
<option value="${rootCategory.id}" ${params.firstValue ==rootCategory.id ? 'selected="selected"' :''} >${rootCategory.categoryName}</option>
</c:forEach>
</select>
</div>
<!-- 二级select -->
<div class="form-group col-md-2 " id="box-select-second" style="display:none;" >
<select class="form-control selectpicker show-tick reset" id="select-second" title="二级分类" name="sonCategoryId" data-getDataUrl="${pageContext.request.contextPath}/admin/spu/spu/getsonCategory" data-live-search="true" data-size="6"> </select>
</div>
<!-- 三级select -->
<div class="form-group col-md-2 " id="box-select-third" style="display:none;" >
<select class="form-control selectpicker show-tick reset" id="select-third" title="三级分类" name="categoryId" data-getDataUrl="${pageContext.request.contextPath}/admin/spu/spu/getsonCategory" data-live-search="true" data-size="6"> </select>
</div>
<div class="form-group form-inline col-md-2 ">
<input id="formSearch" type="button" class="form-control" value="搜索" >
</div>
</div>
</form>
3、Jquery实现级联效果，注意：因为引入了bootstrap-select组件，异步ajax获得回传的数据添加到select时，需要调用selectpicker('refresh')方法刷新才看得见新的option选项：
<script type="text/javascript">
$().ready(function(){ //级联select:首级select的值发生改变，触发二级的选项改变
$("#select-first").change(function(){
//清空二级和三级select的旧选项
$("#select-second").empty();
$("#select-third").empty();
//请求二级select选项数据地址
var targetUrl = $(this).attr("data-getDataUrl"); //一级select的值
var firstValue = $(this).val(); //如果一级select的值为null，隐藏二、三级select,并返回
if(firstValue == ''){
$("#select-second").fadeOut("slow");
$("#select-third").fadeOut("slow");
return;
} //根据一级的值改变，异步获取数据更新二级的选项
$.ajax({
type:'get',
url:targetUrl,
data:{
parentId:firstValue
},
cache:false,
dataType:'json',
success:function(secondDatas){ //遍历回传的数据添加到二级select
$.each(secondDatas, function(key, secondData) { var option = '<option value="'+secondData.id+'">'+secondData.categoryName+'</option>'
$("#select-second").append(option) })
//bootstap-select控件:需刷新对应select
$("#select-second").selectpicker('refresh'); //二级select展示
$("#box-select-second").fadeIn("slow");
//三级select隐藏
$("#box-select-third").fadeOut("slow");
},
error:function(){
bootbox.alert("请求失败")
}
});
}); //级联select:二级select值改变，触发三级select变化
$("#select-second").change(function(){
//清空三级slect的旧选项
$("#select-third").empty();
//请求二级select选项数据地址
var targetUrl = $(this).attr("data-getDataUrl");
//二级select的值
var secondValue = $(this).val();
//如果一级select的值为null，隐藏三级select,并返回
if(secondValue == ''){
$("#select-third").fadeOut("slow");
return;
}
//根据二级的值改变，异步获取数据更新三级的选项
$.ajax({
type:'get',
url:targetUrl,
data:{
parentId:secondValue
},
cache:false,
dataType:'json',
success:function(thirdDatas){ //遍历回传的数据添加到三级select
$.each(thirdDatas, function(key, thirdData) { var option = '<option value="'+thirdData.id+'">'+thirdData.categoryName+'</option>'
$("#select-third").append(option) })
//bootstap-select控件:需刷新对应select
$("#select-third").selectpicker('refresh'); //三级select显示出来
$("#box-select-third").fadeIn("slow");
},
error:function(){
alert("请求失败")
}
});
}); }); </script>
4、后台是使用spring-mvc框架，前端ajax异步请求下级select数据在后台的相关实现是：
/**
* 获得子分类
* @param parentId
* @return
*/
@RequestMapping(value="getsonCategory",method =RequestMethod.GET)
@ResponseBody
public List<TShopCategory> getsonCategory(Long parentId) { List<TShopCategory> sonCategorys =categoryService.getChildrenCategorys(parentId); return sonCategorys;
}
ajax发送select的值和请求地址到后台，后台响应成功后回传子分类的集合给前端，
前端以json格式获得，前端使用Jquery的$.each遍历分类集合，生成<option>标签，使用append()方法将新生成的<option>标签添加到下级的select当中。
图为整合了bootstrap框架+bootstrap-select组件实现的三级select效果：
Jquery 实现select 3级级联查询的更多相关文章
- Jquery+Ajax下拉框级联查询
- mysql 各种级联查询后更新（update select）.
mysql 各种级联查询后更新(update select). CREATE TABLE `tb1` ( `id` int(11) NOT NULL, `A` varchar(100) de ...
- oracle使用connect by进行级联查询 树型菜单
Oracle使用connect by进行级联查询 树型菜单(转) connect by可以用于级联查询,常用于对具有树状结构的记录查询某一节点的所有子孙节点或所有祖辈节点. 来看一个示例,现假设我们拥 ...
- 树概念及使用connect by进行级联查询
树 树,大家都见过,以这种形式的数据关系,就是树.下面看一张图,了解什么是根节点(树干).节点或分叉.叶(叶节点) connect by 级联查询 connect by可以用于级联查询,常用于对具有树 ...
- 【java】itoo项目实战之大数据查询之使用 new map 优化hibernate之级联查询
在我的上一篇博客<[java]itoo项目实战之hibernate 懒载入优化性能>中,我曾提到过学生数据有2万条,查询数据十分的慢,这是让人非常受不了的事情.看着页面进度条一直转着圈圈, ...
- 基于layUI调用后台数据实现区域信息级联查询
基于layUI调用后台数据实现区域信息级联查询 1.基本思路 后台提供根据区域编码查询区域列表公共接口 页面初始化调用后台接口加载所有省份 点击省份将省份区域编码传入后台查询该省份下所有地市信息,以此 ...
- jquery操作select(取值，设置选中）
最近工作中总出现select 和 option问题,整理一下,内容大部分源于网络资料 一.基础取值问题 例如<select class="selector"></ ...
- jQuery还原select下拉列表和清空input的值,回显下拉列表框的值
实现用jQuery还原select下拉列表的值,用了很多种方式,花了一些时间,最后重要找到一种可以实现的方式, 页面上有这些内容 <select id ="level" na ...
- jquery操作select(增加，删除，清空)
jQuery获取Select选择的Text和Value: $("#select_id").change(function(){//code...}); //为Select添加事件, ...
随机推荐
- Oracle EBS 报表日期格式问题
1.确保参数日期值集选择:FND_STANDARD_DATE 2.将程序的入口参数选择为 varchar2类型 3.注意输出和游标时参数的截断 to_date(substr(p_DATE_from, ...
- Vue2学习笔记:实例生命周期
实例生命周期 每个 Vue 实例在被创建之前都要经过一系列的初始化过程.例如,实例需要配置数据观测(data observer).编译模版.挂载实例到 DOM ,然后在数据变化时更新 DOM .在这个 ...
- SQL Server FOR XML PATH 和 STUFF函数的用法
FOR XML PATH ,其实它就是将查询结果集以XML形式展现,将多行的结果,展示在同一行. 下面我们来写一个例子: 假设我们有个工作流程表: CREATE TABLE [dbo].[Workfl ...
- saltstack-把执行结果存储到mysql服务内
saltstack把执行的结果保存到mysql中,以便进行命令安全审计 mysql负责存储数据,mysql-python负责收集数据 master需要安装mysql和MySQL-python,mini ...
- 用一个变量表示 ----------"序号,名称,价格"
goods = [{"name": "电脑", "price": 1999}, {"name": & ...
- 利用skipList(跳表)来实现排序(待补充)
用于排名的数据结构 一般排序为利用堆排序(二叉树)和利用skipList(跳表)的方式 redis中SortedSet利用skipList(跳表)来实现排序,复杂度为O(logn),利用空间换时间,类 ...
- Echarts 多曲线“断点”问题解决方法
Echarts 用来做可视化曲线是非常优秀的一个库.建议使用 Echarts 作为项目的可视化图标库时,仔细研究 官方实例,根据需求来选择类似的示例,下载实例模板来开发,节省时间,减少出错,提高效率. ...
- django 取model字段的verbose_name值
Django 模型中的verbose_name我们常常可能需要使用.比如将数据库里面的数据导出成csv文件,那么csv文件的表头的名字可以通过取每个字段的verbose_name来获取,数据可以通过q ...
- php中static静态变量的使用方法详解
php中的变量作用范围的另一个重要特性就是静态变量(static 变量).静态变量仅在局部函数域中存在且只被初始化一次,当程序执行离开此作用域时,其值不会消失,会使用上次执行的结果. 看看下面 ...
- webapi中使用swagger
net WebApi中使用swagger 我在WebApi中使用swagger的时候发现会出现很多问题,搜索很多地方都没找到完全解决问题的方法,后面自己解决了,希望对于遇到同样问题朋友有帮助.我将先一 ...