首页 > 代码库 > 城市选择（仿jd）
城市选择（仿jd）
HTML代码：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>address</title>
<link rel="stylesheet" href="http://www.mamicode.com/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="http://www.mamicode.com/resources/js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" charset="utf-8" src="http://www.mamicode.com/resources/js/api_areas.js"></script>
<script type="text/javascript" charset="utf-8" src="http://www.mamicode.com/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 = http://www.mamicode.com/(typeof (vals) == ‘undefined‘) ? 0 : vals;"‘ + 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 = http://www.mamicode.com/areas[type]; i < data.length; i++) {"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 =http://www.mamicode.com/= data[i].area_sn) {"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 =http://www.mamicode.com/= 0) {"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);
城市选择（仿jd）
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。