省市地区三级联动弹出层Jquery特效

最新推荐文章于 2024-08-08 07:45:57 发布

光着脚丫数星星

最新推荐文章于 2024-08-08 07:45:57 发布

阅读量2.6k

点赞数

分类专栏： Web前端文章标签： JQuery应用

Web前端专栏收录该内容

47 篇文章 0 订阅

订阅专栏

此特效是一款非常实用的功能，它摆脱了通俗的下拉框联动效果，直接弹出一个层让你选择，增强用户体验效果，带有4个选项卡，分别为热门城市、省份、城市、区县，点击省列表自动跳到城市列表，列表多的话会自动分页，可以左右滚动翻页，引入了3个省、市、区JSON数据包，使用非常简单，引入相关的文件即可，讲这么多大家都流口水了吧，不说了看效果吧

效果如下：

在线演示和下载

标签： jQuery

代码片段(1)[全屏查看所有代码]

1. [代码][JavaScript]代码

 
           ( 
           function 
           () { 
          
           $( 
           ".proCitySelAll" 
           ).click( 
           function 
           (event) { 
          
           if 
            ($( 
           "body" 
           ).data( 
           "CitysAll" 
           ) ==  
           null 
           ) { 
          
           sendAllCitiesAjax(); 
          
           } 
          
           $( 
           this 
           ).select(); 
          
           $( 
           ".provinceCity" 
           ).hide(); 
          
           $( 
           ".provinceCityAll" 
           ).hide(); 
          
           $( 
           "#dimCityQuery" 
           ).hide(); 
          
           var 
            o2 = $( 
           this 
           ).offset(); 
          
           var 
            l2 = o2.left; 
          
           var 
            t2 = o2.top; 
          
           var 
            h2 = $( 
           this 
           ).height(); 
          
           $( 
           ".provinceCityAll" 
           ).css( 
           "top" 
           , t2 + h2 - 1).css( 
           "left" 
           , l2).toggle(); 
          
           $( 
           ".provinceCityAll" 
           ).click( 
           function 
           (event) { 
          
           event.stopPropagation(); 
          
           }); 
          
           event.stopPropagation(); 
          
           $( 
           "html" 
           ).click( 
           function 
           () { 
          
           $( 
           ".provinceCityAll" 
           ).hide(); 
          
           }); 
          
           $( 
           "input.proCitySelAll" 
           ).removeClass( 
           "current2" 
           ); 
          
           $( 
           this 
           ).addClass( 
           "current2" 
           ); 
          
           $( 
           ".provinceCityAll" 
           ).find( 
           ".tabs" 
           ).find( 
           "a" 
           ).removeClass( 
           "current" 
           ); 
          
           $( 
           ".provinceCityAll" 
           ).find( 
           ".tabs" 
           ).find( 
           "a[tb=hotCityAll]" 
           ).addClass( 
           "current" 
           ); 
          
           $( 
           ".provinceCityAll" 
           ).find( 
           ".con" 
           ).children().hide(); 
          
           $( 
           ".provinceCityAll" 
           ).find( 
           ".con" 
           ).find( 
           ".hotCityAll" 
           ).show(); 
          
           if 
            ($( 
           "body" 
           ).data( 
           "allProvinces" 
           ) ==  
           null 
           ) { 
          
           sendAllProvinceAjax(); 
          
           } 
          
           if 
            ($( 
           "body" 
           ).data( 
           "allCountys" 
           ) ==  
           null 
           ) { 
          
           sendAllCountiesAjax(); 
          
           } 
          
           $( 
           ".provinceCityAll" 
           ).find( 
           ".tabs" 
           ).find( 
           "a" 
           ).click( 
           function 
           () { 
          
           if 
            ($( 
           this 
           ).attr( 
           "tb" 
           ) ==  
           "cityAll" 
            && $( 
           ".provinceAll .list .current" 
           ).val() ==  
           null 
           ) { 
          
           return 
           ; 
          
           }; 
          
           if 
            ($( 
           this 
           ).attr( 
           "tb" 
           ) ==  
           "countyAll" 
            && $( 
           ".cityAll .list .current" 
           ).val() ==  
           null 
            && $( 
           ".hotCityAll .list .current" 
           ).val() ==  
           null 
           ) { 
          
           return 
           ; 
          
           }; 
          
           $( 
           ".provinceCityAll" 
           ).find( 
           ".tabs" 
           ).find( 
           "a" 
           ).removeClass( 
           "current" 
           ); 
          
           $( 
           this 
           ).addClass( 
           "current" 
           ); 
          
           var 
            tb = $( 
           this 
           ).attr( 
           "tb" 
           ); 
          
           $( 
           ".provinceCityAll" 
           ).find( 
           ".con" 
           ).children().hide(); 
          
           $( 
           ".provinceCityAll" 
           ).find( 
           ".con" 
           ).find( 
           "." 
            + tb).show(); 
          
           }); 
          
           }); 
          
           })();