jQuery+java实现四级级联菜单_java实现四级联-优快云博客

本文链接：https://blog.youkuaiyun.com/yuefengyuan/article/details/6891238

本文详细阐述了如何通过JavaScript实现产品大类、分类、小类及明细的筛选与加载优化，采用AJAX异步加载技术提升用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

$(document).ready(function(){//填充产品大类目前优化

      var cruVal = $("#prdCode").val();//大类
      //alert(cruVal);
      $.getJSON("/LoadPrdClassServlet?firstCode=1",function(data){
          var str = "<option value=''>请选择</option>";
          var tmp = "";
          $.each(data.PrdClass,function(i,items) {
              if (items.prdClass==cruVal) {
                 tmp = "<option selected='selected' value="+items.prdClass+">"+items.prdName+"</option>";
              } else {
             tmp = "<option value="+items.prdClass+">"+items.prdName+"</option>";
              }
              str = str+tmp;
          });
         $("#searchDLPrd").html(str);
      });
      var flVal = $("#prdFlCode").val();//分类
      $.getJSON("/LoadFlPrdClassServlet?bigCode="+cruVal,function(data){
          var str = "<option value=''>请选择</option>";
          var tmp = "";
          $.each(data.PrdClass,function(i,items) {
              if (items.prdClass==flVal) {
                 tmp = "<option selected='selected' value="+items.prdClass+">"+items.prdName+"</option>";
              } else {
             tmp = "<option value="+items.prdClass+">"+items.prdName+"</option>";
              }
              str = str+tmp;
          });
         $("#searchFLPrd").html(str);
      });
      var xlVal = $("#prdXlCode").val();//小类
      $.getJSON("/LoadXlPrdClassServlet?flCode="+flVal,function(data){
          var str = "<option value=''>请选择</option>";
          var tmp = "";
          $.each(data.PrdClass,function(i,items) {
              if (items.prdClass==xlVal) {
                 tmp = "<option selected='selected' value="+items.prdClass+">"+items.prdName+"</option>";
              } else {
             tmp = "<option value="+items.prdClass+">"+items.prdName+"</option>";
              }
              str = str+tmp;
          });
         $("#searchXLPrd").html(str);
      });
      var mxVal = $("#prdMxCode").val();//明细
      $.getJSON("/LoadMxPrdClassService?xlCode="+xlVal,function(data){
          var str = "<option value=''>请选择</option>";
          var tmp = "";
          $.each(data.PrdClass,function(i,items) {
              if (items.prdClass==mxVal) {
                 tmp = "<option selected='selected' value="+items.prdClass+">"+items.prdName+"</option>";
              } else {
             tmp = "<option value="+items.prdClass+">"+items.prdName+"</option>";
              }
              str = str+tmp;
          });
         $("#searchMXPrd").html(str);
      });

      $("#searchDLPrd").change(function(){
           $("#searchMXPrd").html("");
           $("#searchXLPrd").html("");
           $("#searchFLPrd").html("");
           var bigVal = $(this).val();
           $.getJSON("/LoadPrdClassServlet?bigCode="+bigVal,function(data){
             var str = "<option value=''>请选择</option>";
            var tmp = "";
               $.each(data.PrdClass,function(i,items) {
               tmp = "<option value="+items.prdClass+">"+items.prdName+"</option>";
               str = str+tmp;
               });
               $("#searchFLPrd").html(str);
           });
      });
      $("#searchFLPrd").change(function(){
            $("#searchMXPrd").html("");
            $("#searchXLPrd").html("");
            var flVal = $(this).val();
            $.getJSON("/LoadPrdClassServlet?flCode="+flVal,function(data){
             var str = "<option value=''>请选择</option>";
            var tmp = "";
               $.each(data.PrdClass,function(i,items) {
               tmp = "<option value="+items.prdClass+">"+items.prdName+"</option>";
               str = str+tmp;
               });
               $("#searchXLPrd").html(str);
           });
      });
      $("#searchXLPrd").change(function(){
           $("#searchMXPrd").html("");
           var xlVal = $(this).val();
           $.getJSON("/LoadPrdClassServlet?xlCode="+xlVal,function(data){
             var str = "<option value=''>请选择</option>";
            var tmp = "";
               $.each(data.PrdClass,function(i,items) {
               tmp = "<option value="+items.prdClass+">"+items.prdName+"</option>";
               str = str+tmp;
               });
               $("#searchMXPrd").html(str);
           });
      });
});