jQuery实现的地址选择
来源：互联网 发布：计算型材米重的软件 编辑：程序博客网 时间：2024/06/08 00:16
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> <!--[if lt IE 7]><script src="areaselect/json2.js"></script><![endif]--> <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>√</i><a href="javascript:void(0);">请选择国家</a></li>'; for (i in json_data) { str += '<li><i>√</i><a href="javascript:void(0);">' + json_data[i] + '</a></li>' }; 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;}运行结果如图:
0 0
- jQuery实现的地址选择
- 基于JQuery的 移动端地址选择
- PickerView实现全国地址的选择
- 利用JScript实现简单的地址选择
- JQuery/JS实现的三级联动选择
- JQuery里选择超链接的实现代码
- JQuery实现简单的选择框
- 地址联动jquery插件的实现
- jquery 实现左右选择
- jquery实现checkbox 选择
- 城市选择 jQuery实现
- 用jquery实现简单的年月日下拉框选择
- 关于最多只能选择两个多选框的jQuery功能实现
- 用jquery实现可以左右选择的菜单效果
- jquery实现可以左右选择的下拉菜单效果
- jquery禁用右键、文本选择功能、复制按键的实现
- jquery禁用右键、文本选择功能、复制按键的实现
- jquery禁用右键、文本选择功能、复制按键的实现
- leetcode有关链表
- linux学习(10) 使用XShel连接跳板机步骤
- Quartz入门
- 快速排序的优化
- 树莓派显示中文字体
- jQuery实现的地址选择
- C#关键字partial在asp.net mvc中的应用
- linux commands
- 4.Hibernate关系映射
- 第54篇撤销后笔迹的同步解决方案总结（三）
- VS2015常用快捷键
- 撞库介绍及个人信息保护
- orb-slam2+Windows系统+debug模式运行成功
- 常用无类路由协议组播地址
