实现城市选择控件的效果可以分为以下几个步骤：
1. 编写HTML代码
通过HTML代码，我们可以创建城市选择控件需要的元素。示例代码如下：
<input type="text" id="city-picker" placeholder="请选择省/市/区" readonly>
<div class="city-picker-container">
<div class="city-picker-tab">
<div class="tab-item active">省份</div>
<div class="tab-item">城市</div>
<div class="tab-item">区县</div>
</div>
<div class="city-picker-content">
<div class="content-item active">
<ul class="province-list">
<li data-code="110000">北京市</li>
<li data-code="120000">天津市</li>
<li data-code="310000">上海市</li>
<li data-code="440000">广东省</li>
<li data-code="330000">浙江省</li>
<li data-code="420000">湖北省</li>
<li data-code="410000">河南省</li>
<li data-code="320000">江苏省</li>
<li data-code="130000">河北省</li>
<li data-code="210000">辽宁省</li>
</ul>
</div>
<div class="content-item">
<ul class="city-list"></ul>
</div>
<div class="content-item">
<ul class="district-list"></ul>
</div>
</div>
</div>
在上面的代码中，我们定义了一个文本输入框和一个城市选择控件的容器，容器中包含两部分内容：标签栏和内容区域。标签栏用于切换各个选项卡，内容区域显示省、市、区的列表。
2. 编写CSS代码
编写CSS代码用于美化页面，使城市选择控件更加美观。示例代码如下：
.city-picker-container {
position: relative;
margin-top: 5px;
width: 300px;
}
.city-picker-tab {
display: flex;
justify-content: space-between;
border: 1px solid #ccc;
}
.tab-item {
padding: 10px;
width: 33.33333%;
text-align: center;
font-size: 14px;
cursor: pointer;
}
.tab-item.active {
background-color: #f7f7f7;
}
.city-picker-content {
position: absolute;
top: 38px;
left: 0;
right: 0;
z-index: 999;
border: 1px solid #ccc;
border-top: none;
display: none;
}
.content-item {
display: none;
}
.content-item.active {
display: block;
}
.province-list,
.city-list,
.district-list {
list-style: none;
padding: 10px;
margin: 0;
}
.province-list li,
.city-list li,
.district-list li {
padding: 10px 5px;
cursor: pointer;
}
.province-list li:hover,
.city-list li:hover,
.district-list li:hover {
background-color: #f7f7f7;
}
在上面的代码中，我们定义了容器、标签栏、内容区域的样式以及省、市、区列表的样式。
3. 添加交互逻辑
接下来，我们需要添加JavaScript代码以实现控件的交互逻辑。首先，我们需要监听文本输入框的点击事件，当点击文本输入框时，显示城市选择控件。
var cityPicker = document.querySelector('#city-picker');
var container = document.querySelector('.city-picker-container');
var tabs = document.querySelectorAll('.tab-item');
var contents = document.querySelectorAll('.content-item');
var provinceList = document.querySelector('.province-list');
var cityList = document.querySelector('.city-list');
var districtList = document.querySelector('.district-list');
cityPicker.onclick = function() {
container.style.display = 'block';
};
在上面的代码中，我们通过querySelector方法获取了城市选择控件需要的各个元素，并监听文本输入框的点击事件。当点击文本输入框时，设置城市选择控件的容器可见。
接着，我们需要监听标签栏的点击事件，当点击不同的标签时，切换到对应的内容区域。
for (var i = 0; i < tabs.length; i++) {
tabs[i].index = i;
tabs[i].onclick = function() {
for (var j = 0; j < tabs.length; j++) {
tabs[j].classList.remove('active');
contents[j].classList.remove('active');
}
this.classList.add('active');
contents[this.index].classList.add('active');
}
}
在上面的代码中，我们遍历了标签栏的所有元素，并监听每个标签的点击事件。当点击某个标签时，移除所有标签和内容区域的active类，然后给当前标签和对应的内容区域添加active类。
最后，我们需要填充省、市、区列表的数据，并实现联动效果。例如，当选中某个省份时，刷新城市列表并显示城市列表。示例代码如下：
var cityData = {
110000: [
{
code: 110100,
name: '北京市'
}
],
120000: [
{
code: 120100,
name: '天津市'
}
],
310000: [
{
code: 310100,
name: '上海市'
}
],
440000: [
{
code: 440100,
name: '广州市'
},
{
code: 440200,
name: '韶关市'
},
{
code: 440300,
name: '深圳市'
},
{
code: 440400,
name: '珠海市'
},
{
code: 440500,
name: '汕头市'
}
],
330000: [
{
code: 330100,
name: '杭州市'
},
{
code: 330200,
name: '宁波市'
},
{
code: 330300,
name: '温州市'
},
{
code: 330400,
name: '嘉兴市'
},
{
code: 330500,
name: '湖州市'
}
],
420000: [
{
code: 420100,
name: '武汉市'
},
{
code: 420200,
name: '黄石市'
},
{
code: 420300,
name: '十堰市'
},
{
code: 420400,
name: '宜昌市'
},
{
code: 420500,
name: '襄阳市'
}
],
410000: [
{
code: 410100,
name: '郑州市'
},
{
code: 410200,
name: '开封市'
},
{
code: 410300,
name: '洛阳市'
},
{
code: 410400,
name: '平顶山市'
},
{
code: 410500,
name: '安阳市'
}
],
320000: [
{
code: 320100,
name: '南京市'
},
{
code: 320200,
name: '无锡市'
},
{
code: 320300,
name: '徐州市'
},
{
code: 320400,
name: '常州市'
},
{
code: 320500,
name: '苏州市'
}
],
130000: [
{
code: 130100,
name: '石家庄市'
},
{
code: 130200,
name: '唐山市'
},
{
code: 130300,
name: '邯郸市'
},
{
code: 130400,
name: '邢台市'
},
{
code: 130500,
name: '保定市'
}
],
210000: [
{
code: 210100,
name: '沈阳市'
},
{
code: 210200,
name: '大连市'
},
{
code: 210300,
name: '鞍山市'
},
{
code: 210400,
name: '抚顺市'
},
{
code: 210500,
name: '本溪市'
}
]
};
function refreshCityList(provinceCode) {
cityList.innerHTML = '';
var cities = cityData[provinceCode];
for (var i = 0; i < cities.length; i++) {
var city = cities[i];
var li = document.createElement('li');
li.innerHTML = city.name;
li.setAttribute('data-code', city.code);
cityList.appendChild(li);
}
}
provinceList.onclick = function(e) {
if (e.target.tagName.toLowerCase() === 'li') {
var provinceCode = e.target.getAttribute('data-code');
e.target.parentNode.querySelector('.active').classList.remove('active');
e.target.classList.add('active');
refreshCityList(provinceCode);
tabs[0].classList.remove('active');
tabs[1].classList.add('active');
contents[0].classList.remove('active');
contents[1].classList.add('active');
}
};
cityList.onclick = function(e) {
if (e.target.tagName.toLowerCase() === 'li') {
var cityCode = e.target.getAttribute('data-code');
e.target.parentNode.querySelector('.active').classList.remove('active');
e.target.classList.add('active');
// TODO: 刷新区县列表
tabs[1].classList.remove('active');
tabs[2].classList.add('active');
contents[1].classList.remove('active');
contents[2].classList.add('active');
}
};
在上面的代码中，我们定义了城市数据和刷新城市列表的方法。当选中某个省份时，调用refreshCityList方法刷新城市列表并显示城市列表。当选中某个城市时，刷新区县列表并显示区县列表。
至此，我们已经完成了JavaScript实现城市选择控件的效果的完整攻略。
本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：JavaScript实现城市选择控件的效果 - Python技术站
微信扫一扫 
支付宝扫一扫 