HTML代码：
<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title>address</title> <link rel="stylesheet" href="resources/css/address.css"/></head><body><!--传入初始值--><div class="distpicker"> <span class="address-title triangle">选择地址</span>
<div class="address-container" id="address-container" style="display: none"></div></div><br/><br/><br/><br/><!--未初始值--><div class="distpicker"> <span class="address-title triangle">选择地址</span>
<div class="address-container" id="address-container1" style="display: none"></div></div><script type="text/javascript" charset="utf-8" src="resources/js/jquery-1.7.2.min.js"></script><script type="text/javascript" charset="utf-8" src="resources/js/api_areas.js"></script><script type="text/javascript" charset="utf-8" src="resources/js/getCity.js"></script><script> $(function () { $(‘.distpicker‘).on({ mouseover: function () { $(this).addClass(‘hover‘); $(this).find(‘.address-container‘).show(); }, mouseout: function () { $(this).removeClass(‘hover‘); $(this).find(‘.address-container‘).hide(); } });
$(‘#address-container‘).getCity({ province: [‘province‘, 1, 500000], city: [‘city‘, 500000, 500100], area: [‘area‘, 500100, 500104] });
$(‘#address-container1‘).getCity({ province: [‘province‘], city: [‘city‘], area: [‘area‘] }); })</script></body></html>
CSS代码：
.distpicker {position: relative;display: inline-block;line-height: 1.5;}
.triangle:after {content: ‘‘;border: 5px solid transparent;display: inline-block;position: absolute;right: 10%;top: 40%;width: 0;height: 0;border-top-color: #666666;}.address-content .address-tab:after, .address-content .province-list:after, .address-content .city-list:after, .address-content .area-list:after { content: ‘‘; display: table; clear: both; }
.address-title {display: inline-block;margin-left: 3px;border: 1px solid #DDD;font-size: 12px;height: 25px;line-height: 24px;position: relative;top: 1px;padding: 0 40px 0 20px;background-color: #fff;cursor: pointer;}.address-title:hover,.address-title.hover {background-color: #225f8c;color: #ffffff;}.triangle:hover:after,.address-title.hove:after {border-top-color: transparent;border-bottom-color: #ffffff;top: 3px;}
.address-container { width: 400px; position: absolute; z-index: 1000; left: 2px; top: 30px; background-color: #fff; border: 1px solid #dddddd; -moz-box-shadow: 2px 2px 5px #dddddd; -webkit-box-shadow: 2px 2px 5px #dddddd; box-shadow: 2px 2px 5px #dddddd; }.address-content .address-tab { width: 100%; border-bottom: 1px solid #225f8c; background-color: #f3f3f3;}.address-content .address-tab a {float: left; padding: 6px 20px; cursor: pointer; font-size: 16px; }.address-content .address-tab .current { background-color: #225f8c; color: #ffffff; }
.address-content .province-list, .address-content .city-list, .address-content .area-list { padding: 10px; }.address-content .city-list, .address-content .area-list { display: none;}.address-content .province-list a, .address-content .city-list a, .address-content .area-list a { display: inline-block; cursor: pointer; margin-bottom: 15px; font-size: 14px; }.address-content .city-list a, .address-content .area-list a { padding: 4px 10px;; margin-right: 20px; }.address-content .province-list a { width: 20%; text-align: center; height: 30px; line-height: 29px; font-size: 14px; }.address-content .province-list a:hover, .address-content .province-list a.active, .address-content .city-list a:hover, .address-content .city-list a.active, .address-content .area-list a:hover, .address-content .area-list a.active { background-color: #5bc0de; color: #ffffff; }
JS代码：
/**
* Created by Administrator on 2016/11/9 0009.
*/
(function ($) {
$.fn.getCity = function (options) {
var settings = $.extend({
province: null,
city: null,
area: null
}, options);
var container = this,
province = settings.province,
city = settings.city,
area = settings.area,
containerHtml = ‘‘,
addressTab,
provinceListA,
cityListA,
areaListA,
tlt = $(container).siblings(‘.address-title‘),
addressTabProvinceList,
addressTabCityList,
addressTabAreaList;
containerHtml = ‘<input class="input-province" type="hidden" name="province" value/><input class="input-city" type="hidden" name="city" value/><input class="input-area" type="hidden" name="county" value/><div class="address-content"><div class="address-tab"><a class="current" data-id="province-list" data-cid=""></a><a data-id="city-list" data-cid=""></a><a data-id="area-list" data-cid=""></a></div><div class="province-list" data-level="2"></div><div class="city-list" data-level="3"></div><div class="area-list" data-level="4"></div></div>‘;
$(container).html(containerHtml);
var getCityCascade = function (type, parents, vals) {
var html = ‘‘, parent, value, tag, addressTabA, firstElemA;
value = (typeof (vals) == ‘undefined‘) ? 0 : vals;
tag = $(container).find($(‘.‘ + type + ‘-list‘));
addressTab = tag.siblings(‘.address-tab‘);
addressTabA = addressTab.find(‘[data-id="‘ + type + ‘-list"]‘);
if (type == ‘province‘ && typeof (parents) == ‘undefined‘) {
parent = 1;
} else if (type == ‘city‘ && typeof (parents) == ‘undefined‘) {
parent = 110000
} else if (type == ‘area‘ && typeof (parents) == ‘undefined‘) {
parent = 110100
} else {
parent = parents
}
for (var i = 0, data = areas[type]; i < data.length; i++) {
if (parent == data[i].area_parent) {
html += ‘<a "data-index="‘ + i + ‘" data-type="‘ + data[i].area_type + ‘" data-parent="‘ + data[i].area_parent + ‘" data-sn="‘ + data[i].area_sn + ‘" data-name="‘ + data[i].area_name + ‘"‘;
if (value == data[i].area_sn) {
html += ‘ class="active"‘;
addressTabA.html(data[i].area_name);
$(container).find(‘.input-‘ + type).val(value);
}
html += ‘>‘ + data[i].area_name + ‘</a>‘;
}
}
tag.html(html);
firstElemA = tag.find(‘a‘).first();
if (value == 0) {
addressTabA.html(firstElemA.html());
firstElemA.addClass(‘active‘);
$(container).find(‘.input-‘ + type).val(firstElemA.attr(‘data-sn‘));
}
};
if (typeof (province) == ‘object‘) {
getCityCascade(province[0], province[1], province[2]);
}
if (typeof (city) == ‘object‘) {
getCityCascade(city[0], city[1], city[2]);
}
if (typeof (area) == ‘object‘) {
getCityCascade(area[0], area[1], area[2]);
}
provinceListA = $(container).find($(‘.province-list‘));
cityListA = $(container).find($(‘.city-list‘));
areaListA = $(container).find($(‘.area-list‘));
var classoPeration = function (tag, className) {
tag.addClass(className).siblings(‘a‘).removeClass(className);
};
addressTab.on(‘click‘, ‘a‘, function () {
classoPeration($(this), ‘current‘);
var tag = $(this).parent();
var elem = tag.siblings(‘.‘ + $(this).attr(‘data-id‘));
tag.siblings().not(elem).hide();
elem.show();
});
addressTabProvinceList = addressTab.find(‘[data-id="province-list"]‘);
addressTabCityList = addressTab.find(‘[data-id="city-list"]‘);
addressTabAreaList = addressTab.find(‘[data-id="area-list"]‘);
provinceListA.on(‘click‘, ‘a‘, function () {
classoPeration($(this), ‘active‘);
getCityCascade(‘city‘, $(this).attr(‘data-sn‘));
getCityCascade(‘area‘, cityListA.find(‘a‘).first().attr(‘data-sn‘));
addressTabProvinceList.html($(this).html());
$(container).find(‘.input-province‘).val($(this).attr(‘data-sn‘));
tlt.html($(this).html());
});
cityListA.on(‘click‘, ‘a‘, function () {
classoPeration($(this), ‘active‘);
getCityCascade(‘area‘, $(this).attr(‘data-sn‘));
addressTabCityList.html($(this).html());
$(container).find(‘.input-city‘).val($(this).attr(‘data-sn‘));
tlt.html(addressTabProvinceList.html() + ‘|‘ + $(this).html());
});
areaListA.on(‘click‘, ‘a‘, function () {
classoPeration($(this), ‘active‘);
addressTabAreaList.html($(this).html());
$(container).find(‘.input-area‘).val($(this).attr(‘data-sn‘));
tlt.html(addressTabProvinceList.html() + ‘|‘ + addressTabCityList.html() + ‘|‘ + $(this).html());
});
};
})(jQuery);
时间： 2024-12-17 17:29:29