后台获取数据实现二级联动效果

二级联动的函数封装

这里是初步实现思路,根据功能后期有改动

后台获取数据实现二级联动效果_第1张图片
后台获取数据实现二级联动效果_第2张图片

Base.linkage=function (e,p1) {  

  Base.GetAjax(data,function(data){   

       if(data.status==0){      

           // console.log(data);  

            var firstArr=[];

            firstArr = data.msg.p0;      

            var firstStr = '';      

            var secStr = '';

            //      console.log(firstArr)     

           for(var i = 0; i < firstArr.length; i++) {

               //        console.log(firstArr[i].id)       

               firstStr = `${firstArr[i].name}`;       

              $("#allSelect").append(firstStr)     

            }      

            // console.log(data.p1488);     

 $("#allSelect").on('change', function() {        

        $('#secondSelect').empty();        

          secStr = `--请选择--`;       

         $("#secondSelect").append(secStr)        

         var value =$(this).val();        

          var secId = 'p' + value;

 //        console.log(secId);        

           var secArr = [];        

           for(var k in data.msg){         

                 if(k == secId ){            

                  secArr = data.msg[k];         

               }       

            }

 //        console.log(secArr);

 //        console.log(secArr.length);       

      for(var i = 0; i < secArr.length; i++) {         

            if(secArr[i]=={}){          

                 secStr = `--请选择--`;           

               $("#secondSelect").append(secStr)        

           }else{           

             secStr = `${secArr[i].name}`;            

               $("#secondSelect").html(secStr)        

               }        

           }      

         })   

 } 

 }) 

}



后台获取数据实现二级联动效果_第3张图片

你可能感兴趣的:(后台获取数据实现二级联动效果)