前端页面相关代码:
<div class="col-sm-2 m-b-xs">
<select onchange="one()" id="selectone" name="categoryOne" class="form-control" >
<option value="">--一级类别--</option>
<option th:each="goodCategoryOne : ${goodCategoryOneList}" th:text="${goodCategoryOne.name}" th:value="${goodCategoryOne.cid}" th:selected="${goodCategoryOne.cid}== ${categoryOne}"></option>
</select>
</div>
<div class="col-sm-2 m-b-xs">
<select onchange="two()" name="goodCategoryTwo" id="select2" class="form-control">
<option value="">--二级类别--</option>
<option class="two" th:each="goodCategoryTwo : ${goodCategoryTwoList}" th:text="${goodCategoryTwo.name}" th:selected="${goodCategoryTwo.cid}== ${categoryTwo}" th:value="${goodCategoryTwo.cid}">
</option>
<option class="twos" th:each="goodCategoryTwos : ${goodCategoryTwoList}" th:text="${goodCategoryTwos.cid}" th:value="${goodCategoryTwos.oneCid}">
</option>
</select>
</div>
<div class="col-sm-2 m-b-xs">
<select name="categoryThree" id="select3" class="form-control">
<option value="">--三级类别--</option>
<option class="three" th:each="goodCategoryThree : ${goodCategoryThreeList}" th:text="${goodCategoryThree.name}" th:selected="${goodCategoryThree.cid}== ${categoryThree}" th:value="${goodCategoryThree.cid}">
</option>
<option class="threes" th:each="goodCategoryThrees : ${goodCategoryThreeList}" th:text="${goodCategoryThrees.cid}" th:value="${goodCategoryThrees.twoCid}">
</option>
</select>
</div>
jQuery相关代码:
<script type="text/javascript">
function one(){
$(".two").hide();
$(".twos").hide();
var vs = $('select option:selected').val();
$("#select2").each(function(){
$(this).find("option").eq(0).prop("selected",true)
})
var text=null;
var array2 = new Array();
$(".twos").each(function(){
var txt = $(this).val();
if(txt == vs){
text=$(this).text();
array2.push(text);
}
})
$.each(array2,function(index,value){
$(".two").each(function(){
var txtss = $(this).val();
if(txtss == value){
$(this).show();
}
})
});
}
$(function() {
$(".two").hide();
$(".twos").hide();
$(".three").hide();
$(".threes").hide();
var vs = $('#selectone option:selected').val();
var array2 = new Array();
$(".twos").each(function(){
var txt = $(this).val();
if(txt == vs){
text=$(this).text();
array2.push(text);
}
})
$.each(array2,function(index,value){
$(".two").each(function(){
var txtss = $(this).val();
if(txtss == value){
$(this).show();
}
})
});
var vss= $('#select2 .two:selected').val();
var array2 = new Array();
$(".threes").each(function(){
var txts = $(this).val();
if(txts == vss){
text=$(this).text();
array2.push(text);
}
})
$.each(array2,function(index,value){
$(".three").each(function(){
var txtss = $(this).val();
if(txtss == value){
$(this).show();
}
})
});
});
</script>
<script type="text/javascript">
function two(){
$(".three").hide();
$(".threes").hide();
var vss= $('select .two:selected').val();
$("#select3").each(function(){
$(this).find("option").eq(0).prop("selected",true)
})
var text=null;
var array2 = new Array();
$(".threes").each(function(){
var txts = $(this).val();
if(txts == vss){
text=$(this).text();
array2.push(text);
}
})
$.each(array2,function(index,value){
$(".three").each(function(){
var txtss = $(this).val();
if(txtss == value){
$(this).show();
}
})
});
}
</script>
此三级联动,将数据一次性交于前端页面处理,减少访问数据库次数,就是加载页面有可能慢些
分享到:
相关推荐
在网页开发或者数据分析时,经常会遇到“省市区三级联动”的需求,即在用户界面中选择省份后,自动列出该省下的城市,接着选择城市后,再显示该城市下属的区县。这种功能在地址选择、物流配送等领域十分常见。本文将...
在ASP中,二级联动和三级联动下拉框是常见的功能,通常用于实现数据的筛选和过滤,例如在地区选择、商品分类等场景。下面将详细讲解如何在ASP中实现这些功能。 ### 二级联动下拉框 二级联动下拉框是指两个下拉框...
jquery 通用三级联动下拉列表 , 用Jquery实现的三级联动下拉列表插件,压缩包内有多个不同的版本,其实现的基本原理大同小异,无非是调用方式的不同,第一个是通过读取XML构建,支持IE/firefox,chrome不支持,XML...
下拉框select三级联动选择, 非常实用的代码, 代码逻辑强,注释明了,适合初学者及开发工作者直接使用, 灵活配置, 适用于不同的场景, 比较常见就是省市区的选择, 还有职场职业的选择, 等等可联动的单选都适用. ...
在IT领域,尤其是在网页开发中,"省市县三级联动JS与导出数据"是一个常见的需求,主要用于实现用户在选择地理位置时的交互体验。这个压缩包包含的资源可以帮助开发者快速搭建一个省市县三级联动的下拉菜单,并且提供...
在本例中,“asp+js 三级联动选择菜单”是一个结合了这两种技术的实现,用于创建一个能够动态响应用户选择的三级下拉菜单。 1. **ASP原理**: ASP允许开发者在服务器端编写脚本,这些脚本可以处理数据、与数据库...
省市选择三级联动,Html+Jquery+XML+Ajax实现,无论php,jsp, html, asp ,aspx等各种语言都通用。 http://blog.csdn.net/ful1021/article/details/16310667 详细查看地址
在IT行业中,三级联动是一种常见的交互设计,常用于下拉菜单、地区选择、商品分类等场景,本案例中是用于实现全国专业选择的功能。这里我们将深入探讨如何利用JavaScript(包括jQuery库)来实现这一功能,并结合数据...
js实现的三级联动下拉列表 三级关链菜单通用版
"三级联动"是JavaScript中一种常见的交互设计,常见于网站的下拉菜单、地区选择、商品分类等场景。这个效果指的是三个相关的下拉列表(或称为级联选择框)之间存在联动关系,即当用户在一个下拉列表中做出选择时,...
本示例"基于jquery+json的通用三级联动下拉列表"就是一种实现这种功能的方法,它结合了jQuery库的灵活性和JSON数据格式的强大。 **jQuery** 是一个广泛使用的JavaScript库,简化了DOM操作、事件处理、动画和Ajax...
《PHP+TXT二级联动通用查询系统详解》 在IT领域,构建高效且用户友好的查询系统是提升数据处理效率的关键。本文将详细解析名为“php+txt 2级联动通用查询系统 v2023”的软件工具,它是一款基于PHP编程语言与纯文本...
### ASP+JS三级联动知识点详解 #### 一、ASP+JS三级联动概念解析 ASP(Active Server Pages)是一种服务器端脚本环境,在其中可以结合HTML页面、通用的脚本语言(如VBScript或JScript)以及ActiveX组件来创建动态...
在网页开发中,XML常被用来实现数据的动态交互,比如省市县三级联动的选择框功能。 省市县三级联动是一种常见的用户界面设计,常见于地址选择或者定位服务中。用户首先选择省份,接着选择城市,最后选择县或区,每...
内容索引:脚本资源,jQuery,下拉菜单,三级联动 用Jquery实现的三级联动下拉列表插件,压缩包内有多个不同的版本,其实现的基本原理大同小异,无非是调用方式的不同,第一个是通过读取XML构建,支持IE/firefox,...
在IT行业中,三级联动是一种常见的交互设计模式,尤其在数据筛选和导航中广泛使用。它通常涉及三个层次的数据关系,例如省份、城市和区县,用户依次选择每一级,逐级下拉显示相关的下一级选项。这个场景下,全国地址...
在JavaScript编程中,"省市区三级联动"是一个常见的功能需求,尤其在开发涉及地理信息的Web应用时。这个功能使得用户在选择省份后,市、区/县会自动更新为与所选省份相关的选项,提供了良好的用户体验。"js省市区三...
技术特点:Jquery通用 [二维数组] 无限级联动、赋值联动 功能介绍: 无限级联动、赋值联动 ,.net后台赋值,取值,ShowSelect1.SelectID 取值与赋值 数据源必须为三列二维数组!包含 id,名称,父级id,[[1, "根级", 0...
【jQuery + JSON 通用三级联动下拉列表】 在网页设计中,经常需要实现联动效果,特别是在处理地理位置选择或层级分类时。例如,一个常见的需求是从省份、城市到区县的三级联动下拉列表。这个功能可以提高用户体验,...
Jquery通用二维数组无限级联动源码 技术特点:Jquery通用 [二维数组] 无限级联动、赋值联动 功能介绍: 无限级联动、赋值联动 ,.net后台赋值,取值,ShowSelect1.SelectID 取值与赋值 数据源必须为三列二维数组!...