前端页面相关代码:
<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>
此三级联动,将数据一次性交于前端页面处理,减少访问数据库次数,就是加载页面有可能慢些
三级联动通用
猜你喜欢
转载自killerqiao.iteye.com/blog/2397026
今日推荐
周排行