jQuery实现的地址选择

最新推荐文章于 2022-03-15 22:53:35 发布

风神.NET

最新推荐文章于 2022-03-15 22:53:35 发布

阅读量4.4k

点赞数 1

分类专栏： Jquery及其组件文章标签： jquery

Jquery及其组件专栏收录该内容

147 篇文章 3 订阅

订阅专栏

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>&radic;</i><a data-value="0" href="javascript:void(0)">请选择国家</a></li>
                    <li><i>&radic;</i><a data-value="1" href="javascript:void(0)">中国</a></li>
                    <li><i>&radic;</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>&radic;</i><a data-value="0" href="javascript:void(0)">请选择国家</a></li>
                    <li><i>&radic;</i><a data-value="1" href="javascript:void(0)">中国</a></li>
                    <li><i>&radic;</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;</i><a href="javascript:void(0);">请选择国家</a></li>'; for (i in json_data) { str += '<li><i>&radic;</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;
}

运行结果如图:

这里写图片描述

风神.NET

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
2
评论
jQuery实现的地址选择

index.html<!DOCTYPE html><html lang="zh-cn"><head> <meta charset="UTF-8"> <title>地址选择插件</title> <link rel="stylesheet" href="areaselect/style.css"> <scri
复制链接

扫一扫