jQuery+java實現四級級聯菜單

 

$(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);
           }); 
      }); 
});