Connect_logo_6.png 退出
前端视频教程 Thinkphp源码 众筹源码 python 商城源码 商城模板 响应式模板 中文模板 手机模板 企业源码
充值

jQuery移动端城市区县二级联动选择代码

作者/代码整理:  (转载请附加本文地址,带有“懒人原生”字样的谢绝转载) 发布日期:2019-05-15
jQuery移动端城市区县二级联动选择代码,支持根据拼音首字母查找城市的手机城市区县选择代码。


js代码

<script src="js/jquery.min.js"></script>
<script src="js/better-scroll.js"></script>
<script src="js/city.js"></script>
<script>
    var options = {
        scrollY: true, // 因为scrollY默认为true,其实可以省略
        scrollX: true,
        mouseWheel: true,
        click: true
    }
    var wrapper = document.querySelector('.wrapper');
    var scroll = new BScroll(wrapper, options);
    // 城市选择
    $('input[name="city"]').on('click',function(){
        $('.city-box').slideDown(500,function(){
            scroll.refresh();
        });
        $('.masker').removeClass('hidden');
    }) 

    $('.masker').on('click', function(){
        $('.masker').addClass('hidden');
        $('.city-box').slideUp(500);
        $('.area-box').slideUp(500);
    })
    $('.city-box .content').on('click', 'li',  function(e){
        $('input[name="city"]').val(e.target.innerHTML);
        $('input[name="district"]').val('');
        $('.city-box').slideUp(500);
        $('.masker').addClass('hidden');
    })

    $('.hot-city').on('click', 'a',  function(e){
        $(this).addClass('active');
        var hotValue = $(this).attr('data-value');
        $('input[name="city"]').val(hotValue);
        $('input[name="district"]').val('');
        $('.city-box').slideUp(500, function(){
            $('.hot-city a').removeClass('active');        
        });
        $('.masker').addClass('hidden');
    })

    $('.city-sidaber').on('click',function(e){
        var value = e.target.innerHTML;
        var alphabet = $('.letter-title');
        alphabet.map(function(i,item){
            if(item.innerHTML == value){
                scroll.scrollToElement(item);
            }
        })
    })

    $('input[name="district"]').on('click',function(){
        var preValue = $('input[name="city"]').val();
        if(preValue){
            traverseArea(preValue);
            $('.area-box').slideDown(500);
            $('.masker').removeClass('hidden');
        }
    }) 

    $('.citylist').on('click', 'li',  function(e){
        $('input[name="district"]').val(e.target.innerHTML);
        $('.n-msg-city').removeClass('tip-active').text("(必填项)");
        $('.area-box').slideUp(500);
        $('.masker').addClass('hidden');
    })
</script>

猜你喜欢...
java拼多多稳定防风控PDD出码系统
Discuz多配色带手机版城市生活地方门户论坛网站模板 带后台带数据
非亚口腔网站织梦源码 整站打包源码 支持WAP手机
PHP最新版个人付费真人八字算命测运势网站源码 带采集带手机版
ThinkPHP单用户大型购物商场网站模板带QQ登录支持微信支付宝支付
最新2.3.3全套交友程序源码 交友聊天网站 程序带APP源码支持生成APP
TP5商城小程序系统源码 支持砍价推广几个人中心 支持最时尚流行推广名片
ThinkPHP多商户小程序商城源码支持商家入驻签到导航分享+拼团+秒杀+优惠券
ThinkPHP开发小程序公众号H5多端商城程序源码前后端分离支持打包APP
ThinkPHP小说漫画公众号+手机H5源码支持代理扣量
星点城市365本地门户网站源码 分类信息门户网站 新闻资讯门户
黄金家园农场修复版对接了微信的H5支付和公众号支付
K凯斯顿酒店管理连锁有限公司中英文响应式整站源码
74cms5.0含所有商业插件+WeChat mini_v1.0.14骑士5.0小程序前端和5.0配置教程
走到哪都能在线预约教练系统源码 Thinkphp3.2稳定框架预约系统
帝国高仿逗游手游网源码 游戏下载资源网站源码 后台可视化管理
稳定支持版ThinkPHP3.2人力资源招聘系统 在线招聘公众号免费报名系统
Thinkphp5威客任务平台兼职赚钱系统源码支持任务在线下单接单 带投票系统
安卓苹果双端影视APP源码 安卓苹果电视pc四合一多用多功能视频APP源码
laravel客客威客3.6众包任务平台正版带开发和后台使用手册