移动端五级联动地址选择器

最新推荐文章于 2023-03-31 15:57:53 发布
最新推荐文章于 2023-03-31 15:57:53 发布
阅读量887 收藏 1
点赞数
文章标签： html es6 jquery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zhao_guang_liang/article/details/111284350
版权

移动端五级联动地址选择器

html部分

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no" />
    <title>地址选择</title>
    <link rel="stylesheet" href="./position.css">
    <script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script>
    <script src="./position.js"></script>
</head>
<body>
    <input type="text" readonly id="add">
</body>
</html>

css

@charset "UTF-8";
/**CSS Reset**/
body, div, span, h1, h2, h3, h4, h5, h6, header, footer, section, article, aside, details, figcaption, figure, hgroup, nav, menu, address, time, canvas, audio, video, p, pre, sup, sub, ul, ol, li, dl, dt, dd, form, input, button, textarea, select, iframe, img, a { padding: 0; margin: 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
header, footer, section, article, aside, details, figcaption, figure, hgroup, nav, menu { display: block; }
html, body { font-size: 20px; -webkit-overflow-scrolling: touch; }
h1, h2, h3, h4, h5, h6 { font-weight: normal; }
ul, ol { list-style-type: none; }
.addressMsk.show{
    display: block;
}
.addressMsk{
    position: fixed;
    top: 0;
    bottom: 0;
    width: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    display: none;
    z-index: 666;
}
.addressMsk .loading{
    position: absolute;
    bottom: 380px;
    line-height: 20px;
    font-size: 20px;
    color: #fff;
    width: 100%;
    text-align: center;
    z-index: 667;
    font-size: 14px;
}
.addressMsk .addressWrap{
    position: absolute;
    width: 100%;
    height: 400px;
    bottom: -100%;
    background-color: #fff;
    z-index: 668;
}
.addressMsk .addressWrap .addressTitle{
    height: 45px;
    padding: 0 20px;
    box-shadow: 0px 2px 10px #999;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 20px;
    color: #333;
}
.addressMsk .addressWrap .addressTitle span:nth-child(2n-1){
    font-size: 16px;
}
.addressMsk .addressWrap .addressBody{
    width: 100%;
    height: 355px;
    overflow-y: scroll;
}
.addressMsk .addressWrap .addressBody li{
    color: #555;
    width: 100%;
    line-height: 50px;
    height: 50px;
    font-size: 16px;
    border-bottom: 1px solid #ccc;
    text-align: center;
}
.addressMsk .addressWrap .addressBody .active{
    background-color: darkturquoise;
    color: #fff;
}

js代码

	class address{
    constructor(targetID) {
        this.positionNth=1;//当前地址级别
        this.targetID = targetID;//绑定对象id
        this.addressMskId = 'addressMsk'+ new Date().getTime()//遮罩id
        this.addressWrapId = 'addressWrap'+ new Date().getTime()//主体id
        this.addressCelBtnId = 'addressCelBtn' + new Date().getTime()//取消按钮id
        this.addressTitleId = 'addressTitle' + new Date().getTime()//标题id
        this.addressOkBtnId = 'addressOkBtn' + new Date().getTime()//完成按钮id
        this.addressBodyId = 'addressBody' + new Date().getTime()//地址列表id
        this.activeAdd=[]//当前选中地址
        this.prevAddList=[]//历史记录
    }
    init(){
        let that=this
        let address =$(`<div id="${this.addressMskId}" class="addressMsk">
            <div id="${this.addressWrapId}" class="addressWrap">
                <div class="addressTitle">
                    <span id="${this.addressCelBtnId}">取消</span>
                    <span id="${this.addressTitleId}">地址选择器</span>
                    <span id="${this.addressOkBtnId}">下一步</span>
                </div>
                <ul id="${this.addressBodyId}" class="addressBody">
                </ul>
            </div>
            <p class="loading">加载中,请稍后...</p>
        </div>`)
        $('body').append(address)
        $(this.targetID).click(function(){
            that.showAddress()
        })
        $('#'+this.addressMskId).click(function(e){
            if(e.target.id == that.addressMskId){
                that.hideAddress(function(){
                    $('#'+that.addressMskId).removeClass('show')
                    $('#'+that.addressBodyId).html('')
                    that.activeAdd=that.prevAddList[that.prevAddList.length-1]
                })
            }
        })
        $('#'+this.addressBodyId).on('click','li',function(){
            $(this).addClass('active').siblings().removeClass('active')
            that.activeAdd=[$(this).text().trim(),$(this).attr('next')]
        })
        $('#'+this.addressOkBtnId).click(function(){
            that.nextAddress()
        })
        $('#'+this.addressCelBtnId).click(function(){
            that.prevAdderss()
        })
    }
    showAddress(){//显示
        if(!$('#'+this.addressMskId).hasClass('show')){
            $('#'+this.addressMskId).addClass('show')
        }
        switch(this.positionNth){
            case 1:
                this.getNth1()
                break;
            case 2:
                this.getNth2()
                break;
            case 3:
                this.getNth3()
                break;
            case 4:
                this.getNth4()
                break;
            case 5:
                this.getNth5()
                break;
            default:
                break;
    
        }
    }
    hideAddress(fn){//隐藏
        let that=this
        $('#'+this.addressWrapId).animate({"bottom": "-100%"},function(){
            try{
                fn()
            }
            catch{

            }
        });
    }
    prevAdderss(){
        let that = this
        if(that.positionNth==1){
            $(that.targetID).val('')
            that.prevAddList=[]
            that.activeAdd=[]
            that.hideAddress(function(){
                $('#'+that.addressMskId).removeClass('show')
            })
        }else{
            that.positionNth-=1

            that.prevAddList.splice(that.prevAddList.length-1,1)
            that.activeAdd=that.prevAddList[that.prevAddList.length-1]

            let str=''
            $(that.prevAddList).each(function(index,item){
                str+=item[0].trim()
            })
            $(that.targetID).val(str)

            that.hideAddress(that.showAddress())
        }
    }
    nextAddress(){
        let that = this
        if(this.activeAdd.length>0){
            that.hideAddress(function(){
                $('#'+that.addressBodyId).html('')

                that.positionNth+=1
                that.prevAddList.push(that.activeAdd)


                let str=''
                $(that.prevAddList).each(function(index,item){
                    str+=item[0].trim()
                })

                $(that.targetID).val(str)

                if(that.positionNth==6){
                    $('#'+that.addressMskId).removeClass('show')
                    that.activeAdd=[]
                    that.prevAddList=[]
                    that.positionNth=1
                    return
                }
                that.showAddress()
            })
        }else{
            alert('请先选择地区')
        }
    }
    creadAddressBody(arr){//生成地址数据
        let that=this;
        let body=''
        let nextName=''
        switch(this.positionNth){
            case 1:
                nextName='PROVICE_ID'
                break;
            case 2:
                nextName='CITY_ID'
                break;
            case 3:
                nextName='COUNTY_ID'
                break;
            case 4:
                nextName='TOWN_ID'
                break;
            case 5:
                nextName='VILLAGE_ID'
                break;
            default:
                break;
        }
        if(this.positionNth==5){
            $('#'+that.addressOkBtnId).text('完成')
        }else{
            $('#'+that.addressOkBtnId).text('下一步')
        }
        if(this.positionNth==1){
            $('#'+that.addressCelBtnId).text('取消')
        }else{
            $('#'+that.addressCelBtnId).text('上一步')
        }

        $(arr).each(function(index,item){
            body+=`<li name="${item.TEXT.trim()}" next="${item[nextName]}">${item.TEXT}</li>`
        })
        $('#'+this.addressBodyId).html(body)
        that.activeAdd=[]//重新赋值
        $('#'+this.addressWrapId).animate({"bottom": "0"});
    }
    getNth1(){//获取一级数据
        let that=this
        let URL = HOST+"/front/review/provice";
        $.ajax({
            type : "POST",  //提交方式  
            url : URL,//路径  
            data : {  
                 
            },//数据，这里使用的是Json格式进行传输  
            success(res){
                if(res.code==0){
                    that.creadAddressBody(res.data)
                }
            },
            error(err){
                alert('获取地址异常！')
                that.hideAddress(function(){
                    $('#'+that.addressMskId).removeClass('show')
                })
            }
        })
    }
    getNth2(){
        let that=this;
        let URL = HOST+"/front/review/city";
        $.ajax({
            type : "POST",  //提交方式  
            url : URL,//路径  
            data : {  
                PROVINCE_ID:that.activeAdd[1]
            },//数据，这里使用的是Json格式进行传输  
            success(res){
                if(res.code==0){
                    that.creadAddressBody(res.data)
                }
            },
            error(err){
                alert('获取地址异常！')
                that.hideAddress()
            }
        })
    }
    getNth3(){
        let that=this
        let URL = HOST+"/front/review/county";
        $.ajax({
            type : "POST",  //提交方式  
            url : URL,//路径  
            data : {  
                CITY_ID:this.activeAdd[1]
            },//数据，这里使用的是Json格式进行传输  
            success(res){
                if(res.code==0){
                    that.creadAddressBody(res.data)
                }
            },
            error(err){
                alert('获取地址异常！')
                that.hideAddress()
            }
        })
    }
    getNth4(){
        let that=this
        let URL = HOST+"/front/review/town";
        $.ajax({
            type : "POST",  //提交方式  
            url : URL,//路径  
            data : {  
                COUNTY_ID:this.activeAdd[1]
            },//数据，这里使用的是Json格式进行传输  
            success(res){
                if(res.code==0){
                    that.creadAddressBody(res.data)
                }
            },
            error(err){
                alert('获取地址异常！')
                that.hideAddress()
            }
        })
    }
    getNth5(){
        let that=this
        let URL = HOST+"/front/review/village";
        $.ajax({
            type : "POST",  //提交方式  
            url : URL,//路径  
            data : {  
                TOWN_ID:this.activeAdd[1]
            },//数据，这里使用的是Json格式进行传输  
            success(res){
                if(res.code==0){
                    that.creadAddressBody(res.data)
                }
            },
            error(err){
                alert('获取地址异常！')
                that.hideAddress()
            }
        })
    }
}
$(function(){
    new address('#add').init()
})

地址数据下载

点击下载地址数据

大佬们救救孩子吧
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
js地址联动
02-29
在JavaScript（JS）开发中，"地址联动"通常是指在一个输入框中输入或选择一个地址时，相关的下拉菜单或输入框自动填充或更新其他地址字段的过程。这涉及到前端交互设计，提高用户输入效率和准确性。在Web应用程序，...
iosSelect.js 五级联动（最多支持六级联动）
07-06
iosSelect.js 是一个轻量级的JavaScript插件，其核心目标是模拟iOS设备上的选择器样式，提供一种优雅的五级联动选择体验。它通常与CSS样式文件（如iosSelect.css）一起使用，以确保视觉效果与iOS设备的原生风格保持...
小程序实现「省/市/区/街道/社区」5级联动
api工厂
08-09 2969
前言 本教程是基于 “apifm-wxapi” 模块，教你快速实现小程序开发，所以你可能需要先了解以下知识点： 《创建 HelloWorld 项目》 《使用 “apifm-wxapi” 快速开发小程序》 《免费注册开通后台，获得专属域名》 功能说明 本案例行政区数据采用国家统计局2017年公布的权威数据，地区编码为国标； 小程序实现5级联动，实现 省/市/...
vue移动端项目vant组件库之cascader级联选择
热门推荐
笑望灬星辰
02-25 1万+
vue vant 级联选择 <template> <div> <van-field v-model="fieldValue" is-link readonly label="地区" placeholder="请选择所在地区" @click="show = true" /> <van-popup v-model="show" round position="bottom
vant移动端组件van-popup+van-picker实现自定义三级区域级联选择
无
12-12 2233
vant移动端组件van-popup+van-picker实现三级区域级联选择
js 实现 手机app移动端 省市区三级联动选择器（附源码）
qq_39835505的博客
04-18 4379
参考网址 https://blog.csdn.net/weixin_39706415/article/details/83991137 效果 下载源码之后，引入js,css 立马就能用 但它html 页面中 只 打印出了 省市区 的数字组合，比如0,0,0 插入数据库的时候，是数字，可以根据数字进行 搜索同一城市的数据 但如果我想在页面显示所在地的话，就必须是 汉字城市名，存入数据库 我想要的是...
Element-UI省市区（县）三级联动---基于VUX移动框架的x-address组件
yangdengcheng的博客
10-17 6999
Element-UI 省市区（县）三级联动 由于公司移动端使用的是Vux的UI框架，该框架有x-address组件，其中包含了省市县的数据，通过Element-UI实现与其相同的省市区（县）三级联动。 Vux中x-address对全国省市区的数据进行了封装，引入不同版本的JSON文件展示不同的内容，这里我引入的是V4版本（最新版本）的JSON数据，JSON格式如下图： 思路：在此我列举了省市县的...
jquery 手机端二级联动选择
07-06
"jquery 手机端二级联动选择" 是一个常见的功能，特别是在填写地址或者选择区域时，用户需要首先选择省份，然后根据省份的选择来筛选出相应的城市。这个功能能够简化用户的操作流程，提高输入效率。以下是对这个功能...
jQuery城市两级联动手机端插件
06-24
在移动应用开发中，用户可能需要输入或选择他们的所在城市，这时"jQuery城市两级联动手机端插件"就显得尤为重要。这款插件是为适应手机屏幕小、操作便捷的需求而设计的，它使得在有限的界面空间内实现城市选择变得...
h5PickerView纯原生Javascript实现的移动端多级选择器插件
08-10
h5-PickerView是一款基于JavaScript的轻量级移动端组件，专为实现多级联动选择设计。其核心特性在于，通过简单的配置即可实现多级联动效果，极大地提高了开发效率。压缩后的JS文件仅有3.96KB，这使得它在资源有限的...
jQuery插件实现适用于移动端的地址选择器
10-22
本文给大家分享的是一个jQuery插件，实现的是适用于移动端的地址选择器，有需要的小伙伴可以拿走参考下。
Android 选择器
06-28
年月日三级选择器、时间二级选择器、自定义滚轴选择器
地址选择5级联动 及 全国省市县镇村5级数据库
12-17
js+php+html 初入tp5.0,下载过各位大神的代码，搜集过一些资料终于测试通过。数据库有些大200多兆。还请多多指教。数据库很全。是费了好大劲才找到的
中国省市五级联动
01-24
数据库文件
全国行政地区五级联动数据库
02-28
2018最新全国省市区县乡镇五级联动MySQL数据库，解压后接近77M，包含72万行数据，地区精确到村，单表，方便做五级联动。亲测可用，为sql文件，可直接导入使用
Vue3级联选择（Cascader）
Mr Dear的博客
03-31 5309
Vue3+TS 以 Vue3选择框（Select）为基础封装的级联选择框组件，支持清除，搜索，自定义搜索过滤函数等等
2021年省市区街道居委五级联动
qq_15592789的博客
07-05 937
国际统计局2021年省市区街道联动数据抓取
pandas 选择数据 字符串_pandas入门: 数据选择
weixin_39705435的博客
11-21 277
关于pandas数据选择的知识点总结。首先，创建一个dataframedf 创建的dataframe信息如下： A B C 0 3 1.2 aa 1 4 2.4 bb 2 8 4.5 cc 3 9 7.3 dd选择一列df1 = df['A'] # 根据列名选取一列，以Series的形式返回列 df1 = df.A # 与上面写法效果相同结果如下：0 3...
ThinkPhP。 异步实现地区三级联动
霖霖侠
04-01 830
控制器区 <?php namespace app\index\controller; use think\Controller; use app\index\model\Region as regionModel; class Index extends Controller { /** * 城市三级联动
android四级联动地址选择器
最新发布
12-11
Android四级联动地址选择器是一种用户界面组件，用于实现在选择省、市、区和街道地址时的联动效果。它通常被用于用户注册、编辑个人信息等场景中，方便用户快速选择地址信息。 实现四级联动地址选择器，首先需要使用Android提供的相关控件，如Spinner、ListView等。通过Spinner控件可以实现省、市、区和街道的选择，通过ListView控件或其他容器控件可以展示对应的地址列表。 其次，需要准备好相应的地址数据。这些数据可以通过数据库查询或者网络请求获取，也可以事先定义在本地的资源文件中。其中，省份数据为一级数据，市区数据为二级数据，区县数据为三级数据，街道数据为四级数据。每一个省份都包含若干个市，每一个市都包含若干个区县，每一个区县都包含若干个街道。 然后，需要为每一个控件设置适配器，将数据源与控件进行绑定。在选择省份的时候，根据选择的省份动态加载对应的市区数据，并更新市区控件的适配器。同理，选择市区时，动态加载对应的区县数据，并更新区县控件的适配器。选择区县时，动态加载对应的街道数据，并更新街道控件的适配器。 最后，在用户选择了最终的地址信息后，可以获取对应的地址数据，进行后续的处理。可以通过监听事件或者点击事件的方式，获取用户选择的地址信息，并进行保存或者其他操作。 通过以上的步骤，就可以实现一个简单的Android四级联动地址选择器。用户可以根据自己的需要进行修改和扩展，实现更加复杂的地址选择功能。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值