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";
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;
this.addressMskId = 'addressMsk'+ new Date().getTime()
this.addressWrapId = 'addressWrap'+ new Date().getTime()
this.addressCelBtnId = 'addressCelBtn' + new Date().getTime()
this.addressTitleId = 'addressTitle' + new Date().getTime()
this.addressOkBtnId = 'addressOkBtn' + new Date().getTime()
this.addressBodyId = 'addressBody' + new Date().getTime()
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 : {
},
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]
},
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]
},
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]
},
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]
},
success(res){
if(res.code==0){
that.creadAddressBody(res.data)
}
},
error(err){
alert('获取地址异常!')
that.hideAddress()
}
})
}
}
$(function(){
new address('#add').init()
})
地址数据下载
点击下载地址数据