前端页面相关代码:
<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>
This three-level linkage will hand over the data to the front-end page for processing at one time, reducing the number of database visits, that is, the loading of the page may be slower
Universal three-level linkage
Guess you like
Origin http://43.154.161.224:23101/article/api/json?id=326407737&siteId=291194637
Ranking