美文网首页
后台获取数据实现二级联动效果

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

作者: 阿根廷斗牛 | 来源:发表于2017-09-06 11:04 被阅读0次

    二级联动的函数封装

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

    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)        

                   }        

               }      

             })   

     } 

     }) 

    }

    相关文章

      网友评论

          本文标题:后台获取数据实现二级联动效果

          本文链接:https://www.haomeiwen.com/subject/vnpmjxtx.html