城市选择（仿jd）
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了城市选择（仿jd）相关的知识，希望对你有一定的参考价值。
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);
以上是关于城市选择（仿jd）的主要内容，如果未能解决你的问题，请参考以下文章
CSS动效实战（纯CSS与JS动效）02 flex 布局实战（仿 JD 及 gitCode 布局）及 media 自适应初探
CSS动效实战（纯CSS与JS动效）02 flex 布局实战（仿 JD 及 gitCode 布局）及 media 自适应初探
CSS动效实战（纯CSS与JS动效）02 flex 布局实战（仿 JD 及 gitCode 布局）及 media 自适应初探 下
CSS动效实战（纯CSS与JS动效）02 flex 布局实战（仿 JD 及 gitCode 布局）及 media 自适应初探 下
Android Studio 仿首页美团切换城市(ListView)+数据库帮助类SQLiteOpenHelper+LetterView(字母排序)