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 >
<div class="col-md-12 ">
<div class="form-group col-md-2 " >
<!-- 一级select -->
<select class="form-control selectpicker show-tick reset" >
<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 " >
<select class="form-control selectpicker show-tick reset" >
</select>
</div>
<!-- 三级select -->
<div class="form-group col-md-2 " >
<select class="form-control selectpicker show-tick reset" >
</select>
</div>
<div class="form-group form-inline col-md-2 ">
<input >
</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效果：