三级联动通用

前端页面相关代码：

<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>
此三级联动，将数据一次性交于前端页面处理，减少访问数据库次数，就是加载页面有可能慢些