index.html
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>地址选择插件</title>
<link rel="stylesheet" href="areaselect/style.css">
<script src="jquery-1.11.3.js"></script>
<script src="areaselect/areaselect.js"></script>
</head>
<body>
<div class="box">
<div class="address-box">
<div class="input-box" style="display: none;">
<input class="country" name="country" type="text">
<input class="province" name="province" type="text">
<input class="city" name="city" type="text">
<input class="county" name="county" type="text">
<input class="town" name="town" type="text">
</div>
<div class="country-select arrow-bg">
<a class="country-now" href="javascript:void(0)">请选择国家</a>
<ul class="country-list">
<li class="current"><i>√</i><a data-value="0" href="javascript:void(0)">请选择国家</a></li>
<li><i>√</i><a data-value="1" href="javascript:void(0)">中国</a></li>
<li><i>√</i><a data-value="2" href="javascript:void(0)">海外</a></li>
</ul>
</div>
<div class="location-box arrow-bg">
</div>
</div>
</div>
<div class="box">
<div class="address-box2">
<div class="input-box" style="display: none;">
<input class="country" name="country" type="text">
<input class="province" name="province" type="text">
<input class="city" name="city" type="text">
<input class="county" name="county" type="text">
<input class="town" name="town" type="text">
</div>
<div class="country-select">
<a class="country-now" href="javascript:void(0)">请选择国家</a>
<ul class="country-list">
<li class="current"><i>√</i><a data-value="0" href="javascript:void(0)">请选择国家</a></li>
<li><i>√</i><a data-value="1" href="javascript:void(0)">中国</a></li>
<li><i>√</i><a data-value="2" href="javascript:void(0)">海外</a></li>
</ul>
</div>
<div class="location-box">
</div>
</div>
</div>
<script>
$.areaSelect('.address-box');
$.areaSelect('.address-box2');
</script>
</body>
</html>
areaselect.js
(function($) {
$.extend({
areaSelect: function(obj) { var obj = $(obj) $.init(obj) $.clickLoad(obj) },
//点击加载
clickLoad: function(obj) { obj.find('.country-select').click(function (e) { e.stopPropagation() $(this).find('.country-list').toggle(0) $(this).find('.city-select-wrap').hide(0) }) $(document).click(function (e) { e.stopPropagation() obj.find('.country-list').hide(0) obj.find('.city-select-wrap').hide(0) obj.find('.overseas-box').hide(0) }) obj.find('.country-list>li').click(function () { $.init(obj) var locat = parseInt($(this).find('a').attr('data-value')) obj.find('.location-box').hide(0) $(this).siblings('li').removeClass('current') $(this).addClass('current') obj.find('.country-now').html($(this).find('a').html()) obj.find('.country').val($(this).find('a').html()) if (locat != 0) { obj.find('.location-box').show(0) obj.find('.location-box').html($.addLocation(locat)) } //数据获取 //省份 if (locat == 1) { //点击弹出地址选择 obj.find('.city-title').click(function (e) { e.stopPropagation() $(this).next('.city-select-wrap').toggle(0) obj.find('.country-list').hide(0) }) $.getJSON('areaselect/country.json',function(data){ var country = JSON.parse(JSON.stringify(data)) $.each(country, function (name, value) { var city_box = '' var str = '' for (i in value) { str += '<a data-value="' + i + '" href="javascript:void(0);">' + value[i] + '</a>' } city_box = '<dl class="city-box">' + '<dt>' + name + '</dt>' + '<dd>' + str + '</dd>' + '</dl>' obj.find('.city-select.city-province').append(city_box) }) $.areaList('province', obj) $.tabChange(obj) }) } else { //点击弹出地址选择 obj.find('.city-title').click(function (e) { e.stopPropagation() $(this).next('.overseas-box').toggle(0) obj.find('.country-list').hide(0) }) $.loadOther(obj) } }) },
//初始化
init: function(obj) { obj.find('.province').val('') obj.find('.city').val('') obj.find('.county').val('') obj.find('.town').val('') },
//初始框架
addLocation: function(locat) { var str = '' var strtab = '' switch (locat) { case 0: break case 1: str += '<div class="city-title"><span>请选择省市区</span></div>' strtab = '<div class="city-select-tab">'+ '<a class="a-province current" href="javascript:void(0)">省份</a>'+ '<a class="a-city" href="javascript:void(0)">城市</a>'+ '<a class="a-county" href="javascript:void(0)">县区</a>'+ '<a class="a-town" href="javascript:void(0)">街道</a>'+ '</div>' str += '<div class="city-select-wrap">'+ strtab + '<div class="city-select-content">' + '<div class="city-select city-province">' + '</div>' + '<div class="city-select city-city">' + '</div>' + '<div class="city-select city-county">' + '</div>' + '<div class="city-select city-town">' + '</div>' + '</div>' break case 2: str += '<div class="city-title"><span>请选择国家</span></div><div class="overseas-box"></div>' break default: return '<span>输入有误!</span>' } return str },
//tab切换
tabChange: function(obj) { obj.find('.city-select-tab').find('a').click(function (e) { e.stopPropagation() var index = $(this).index() $(this).siblings().removeClass('current') $(this).addClass('current') obj.find('.city-select').hide(0) switch (index) { case 0: obj.find('.city-province').show(0) break case 1: obj.find('.city-city').show(0) break case 2: obj.find('.city-county').show(0) break case 3: obj.find('.city-town').show(0) break default: return 0 } }) },
//地址列表点击事件
areaList: function(area, obj) { obj.find('.city-' + area + ' .city-box').find('dd>a').click(function (e) { e.stopPropagation() var str = '' var output = { province: obj.find('.province'), city: obj.find('.city'), county: obj.find('.county'), town: obj.find('.town') } if (area == 'town') { obj.find('.city-select-wrap').hide(0) } obj.find('.city-select').hide(0) obj.find('.city-' + area).next().show(0) $(this).parents('.city-select').find('.current').removeClass('current') $(this).addClass('current') if (!!(obj.find('.city-select-tab').find('.a-' + area).next().get(0))) { obj.find('.city-select-tab').find('a').removeClass('current') obj.find('.city-select-tab').find('.a-' + area).next().addClass('current') } obj.find('.' + area).val($(this).html()) switch (area) { case 'province': output.city.val('') case 'city': output.county.val('') case 'county': output.town.val('') case 'town': break default: return 0 } $.loadArea(area, $(this), obj) if (!!output.province.val()) str += output.province.val() + '<span>/</span>' if (!!output.city.val()) { if (!(output.city.val() == '市辖区' || output.city.val() == '县')) { str += output.city.val() + '<span>/</span>' } } if (!!output.county.val()) if (!(output.county.val() == '市辖区')) { str += output.county.val() + '<span>/</span>' } if (!!output.town.val()) str += output.town.val() obj.find('.city-title').html(str) }) },
//载入地址列表
loadArea: function(area, _this, obj) { var main = _this.attr('data-value') var mainkey = main.replace('CN','0') var areaNext = '' var areaJson = '' if (area == 'province') { areaNext = 'city' } if (area == 'city') { areaNext = 'county' } if (area == 'county') { areaNext = 'town' } if (area == 'town') { areaNext = ('town') } areaJson = 'areaselect/area_json/area'+(mainkey%110)+'.json' $.getJSON(areaJson,function(data){ var parents = JSON.parse(JSON.stringify(data)) var son_json = parents[main] var city_box = '' var str = '' if (!!son_json) { for (i in son_json) { str += '<a data-value="' + i + '" href="javascript:void(0);">' + son_json[i] + '</a>' } city_box = '<dl class="city-box city-select-'+areaNext+'">' + '<dd>' + str + '</dd>' + '</dl>' obj.find('.city-select.city-'+areaNext).html(city_box) $.areaList(areaNext, obj) } else { obj.find('.city-select-wrap').hide(0) } }) },
//其他国家
loadOther: function (obj) { $.getJSON('areaselect/other.json',function(data){ var json_data = JSON.parse(JSON.stringify(data)) var str = '' str = '<li class="current"><i>&radic for (i in json_data) { str += '<li><i>&radic } str = '<ul class="overseas-list">' + str + '</ul>' obj.find('.overseas-box').html(str) obj.find('.overseas-list>li').click(function () { $.init(obj) $(this).siblings('.current').removeClass('current') $(this).addClass('current') obj.find('.country').val($(this).find('a').text()) obj.find('.city-title').html($(this).find('a').text()) }) }) }
})
})(jQuery)
country.json
{
"A-G": {
"CN12": "安徽",
"CN34": "澳门",
"CN01": "北京",
"CN22": "重庆",
"CN13": "福建",
"CN28": "甘肃",
"CN19": "广东",
"CN20": "广西",
"CN24": "贵州"
},
"H-K": {
"CN21": "海南",
"CN03": "河北",
"CN08": "黑龙江",
"CN16": "河南",
"CN17": "湖北",
"CN18": "湖南",
"CN10": "江苏",
"CN14": "江西",
"CN07": "吉林"
},
"L-S": {
"CN06": "辽宁",
"CN05": "内蒙古",
"CN30": "宁夏",
"CN29": "青海",
"CN15": "山东",
"CN09": "上海",
"CN04": "山西",
"CN27": "陕西",
"CN23": "四川"
},
"T-Z": {
"CN32": "台湾",
"CN02": "天津",
"CN33": "香港",
"CN31": "新疆",
"CN25": "云南",
"CN26": "西藏",
"CN11": "浙江"
}
}
other.json
["阿尔巴尼亚","阿尔及利亚","阿富汗","阿根廷","阿拉伯联合酋长国","阿鲁巴","阿曼","阿塞拜疆","阿森松岛","埃及","埃塞俄比亚","爱尔兰","爱沙尼亚","安道尔","安哥拉","安圭拉","安提瓜岛和巴布达","澳大利亚","奥地利","奥兰群岛","巴巴多斯岛","巴布亚新几内亚","巴哈马","巴基斯坦","巴拉圭","巴勒斯坦","巴林","巴拿马","巴西","白俄罗斯","百慕大","保加利亚","北马里亚纳群岛","贝宁","比利时","冰岛","波多黎各","波兰","玻利维亚","波斯尼亚和黑塞哥维那","博茨瓦纳","伯利兹","不丹","布基纳法索","布隆迪","布韦岛","朝鲜","丹麦","德国","东帝汶","多哥","多米尼加","多米尼加共和国","俄罗斯","厄瓜多尔","厄立特里亚","法国","法罗群岛","法属波利尼西亚","法属圭亚那","法属南部领地","梵蒂冈","菲律宾","斐济","芬兰","佛得角","弗兰克群岛","冈比亚","刚果","刚果民主共和国","哥伦比亚","哥斯达黎加","格恩西岛","格林纳达","格陵兰","古巴","瓜德罗普","关岛","圭亚那","哈萨克斯坦","海地","韩国","荷兰","荷属安地列斯","赫德和麦克唐纳群岛","洪都拉斯","基里巴斯","吉布提","吉尔吉斯斯坦","几内亚","几内亚比绍","加拿大","加纳","加蓬","柬埔寨","捷克共和国","津巴布韦","喀麦隆","卡塔尔","开曼群岛","科科斯群岛","科摩罗","科特迪瓦","科威特","克罗地亚","肯尼亚","库克群岛","拉脱维亚","莱索托","老挝","黎巴嫩","利比里亚","利比亚","立陶宛","列支敦士登","留尼旺岛","卢森堡","卢旺达","罗马尼亚","马达加斯加","马尔代夫","马耳他","马拉维","马来西亚","马里","马其顿","马绍尔群岛","马提尼克","马约特岛","曼岛","毛里求斯","毛里塔尼亚","美国","美属萨摩亚","美属外岛","蒙古","蒙特塞拉特","孟加拉","密克罗尼西亚","秘鲁","缅甸","摩尔多瓦","摩洛哥","摩纳哥","莫桑比克","墨西哥","纳米比亚","南非","南极洲","南乔治亚和南桑德威奇群岛","瑙鲁","尼泊尔","尼加拉瓜","尼日尔","尼日利亚","纽埃","挪威","诺福克","帕劳群岛","皮特凯恩","葡萄牙","乔治亚","日本","瑞典","瑞士","萨尔瓦多","萨摩亚","塞尔维亚,黑山","塞拉利昂","塞内加尔","塞浦路斯","塞舌尔","沙特阿拉伯","圣诞岛","圣多美和普林西比","圣赫勒拿","圣基茨和尼维斯","圣卢西亚","圣马力诺","圣皮埃尔和米克隆群岛","圣文森特和格林纳丁斯","斯里兰卡","斯洛伐克","斯洛文尼亚","斯瓦尔巴和扬马廷","斯威士兰","苏丹","苏里南","所罗门群岛","索马里","塔吉克斯坦","泰国","坦桑尼亚","汤加","特克斯和凯克特斯群岛","特里斯坦达昆哈","特立尼达和多巴哥","突尼斯","图瓦卢","土耳其","土库曼斯坦","托克劳","瓦利斯和福图纳","瓦努阿图","危地马拉","维尔京群岛,美属","维尔京群岛,英属","委内瑞拉","文莱","乌干达","乌克兰","乌拉圭","乌兹别克斯坦","西班牙","希腊","新加坡","新喀里多尼亚","新西兰","匈牙利","叙利亚","牙买加","亚美尼亚","也门","伊拉克","伊朗","以色列","意大利","印度","印度尼西亚","英国","英属印度洋领地","约旦","越南","赞比亚","泽西岛","乍得","直布罗陀","智利","中非共和国"]
style.css
@charset "utf-8";
* {
padding: 0;
margin: 0;
}
body {
font-size: 12px;
}
ul,li {
list-style: none;
}
.box {
margin: 50px auto;
padding: 10px;
width: 600px;
height: 300px;
border: 1px solid #ccc;
}
.box input {
display: inline-block;
width: 80px;
}
a {
color: #333;
text-decoration: none;
}
.arrow-bg {
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMDE0IDc5LjE1Njc5NywgMjAxNC8wOC8yMC0wOTo1MzowMiAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTQgKFdpbmRvd3MpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjhBOTlCQjZGQzk4NDExRTVCNDU3Q0Y4NTMxN0VBMDVBIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjhBOTlCQjcwQzk4NDExRTVCNDU3Q0Y4NTMxN0VBMDVBIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6OEE5OUJCNkRDOTg0MTFFNUI0NTdDRjg1MzE3RUEwNUEiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6OEE5OUJCNkVDOTg0MTFFNUI0NTdDRjg1MzE3RUEwNUEiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz7bgnjUAAAAb0lEQVR42uzWSwrAIAxFUVO61iwqm420NFCkDhRCoNxMFd/xgyru3irraMUFAAAAAADKAedKZzO7Xy5VnbW3p11SViCCI2gSnrsFX4jd8Ktk8T/gY+gIi3HTD+E7cGfmuyvAPQAAAAAAAP4H6AIMAFwUIpswl/WVAAAAAElFTkSuQmCC) no-repeat right top;
}
.country-select {
float: left;
position: relative;
width: 100px;
height: 30px;
border: 1px solid #ccc;
}
.country-select .country-now {
padding-left: 1em;
line-height: 30px;
}
.country-list {
display: none;
position: absolute;
top: 30px;
left: -1px;
width: 100px;
line-height: 28px;
border: 1px solid #ccc;
background: #fff;
}
.country-list li {
position: relative;
}
.country-list li i {
display: none;
position: absolute;
top: 0;
left: 0;
width: 20px;
height: 100%;
color: #f60;
text-align: center;
font-style: normal;
font-weight: bold;
}
.country-list li a {
display: block;
width: 100%;
height: 100%;
text-indent: 20px;
}
.country-list li a:hover {
background: #fff8f3;
}
.country-list li.current i {
display: block;
}
.country-list li.current a {
color: #f60;
font-weight: bold;
}
.location-box {
display: none;
float: left;
position: relative;
margin-left: 20px;
padding: 5px;
width: 300px;
height: 20px;
line-height: 20px;
border: 1px solid #ccc;
}
.city-title {
width: 100%;
height: 100%;
overflow: hidden;
}
.city-title span {
color: #ccc;
}
.city-select-content {
min-height: 30px;
}
.city-select-wrap {
display: none;
position: absolute;
left: -1px;
top: 30px;
border: 1px solid #ccc;
background: #fff;
}
.city-select-tab {
margin-left: -1px;
width: 311px;
height: 35px;
line-height: 35px;
border-bottom: 1px solid #ccc;
background: #f0f0f0;
}
.city-select-tab a {
float: left;
display: block;
width: 76.7px;
height: 35px;
line-height: 35px;
text-align: center;
border-left: 1px solid #ccc;
}
.city-select-tab a.current {
color: #f60;
background: #fff;
border-bottom: 1px solid #fff;
}
.city-select {
display: none;
padding: 10px 15px;
}
.city-province.city-select {
display: block;
}
.city-box {
clear: both;
padding: 3px 0;
margin: 0;
line-height: 2;
}
.city-box:after {
clear: both;
content: " ";
display: block;
font-size: 0;
height: 0;
visibility: hidden;
}
.city-box dt {
float: left;
padding-right: 10px;
width: 25px;
font-weight: 700;
text-align: right;
font-family: arial,sans-serif;
}
.city-box dd {
float: left;
width: 280px;
}
.city-province .city-box dd {
width: 233px;
}
.city-box dd a {
float: left;
padding: 0 9px;
outline: 0;
text-decoration: none;
white-space: nowrap;
}
.city-box dd a:hover {
color: #f60;
background: #fff8f3;
}
.city-box dd a.current {
color: #fff;
border-radius: 2px;
background: #f60;
}
.overseas-box {
display: none;
position: absolute;
left: -1px;
top: 30px;
width: 310px;
height: 300px;
border: 1px solid #ccc;
background: #fff;
overflow: auto;
}
.overseas-list li {
position: relative;
}
.overseas-list li a {
display: block;
height: 28px;
line-height: 28px;
text-indent: 20px;
cursor: pointer;
}
.overseas-list li:hover {
background: #fff8f3;
}
.overseas-list li.current a {
color: #f60;
font-weight: bold;
}
.overseas-list li i {
display: none;
position: absolute;
top: 0;
left: 0;
width: 20px;
height: 100%;
color: #f60;
text-indent: 0;
text-align: center;
font-style: normal;
font-weight: bold;
}
.overseas-list li.current i {
display: block;
}
运行结果如图: