1.先将css样式完成，例如：鼠标悬浮事件之类的
代码如下：
<style>
* {
margin: 0;
padding: 0;
list-style: none;
}
/* 容器样式 */
.main{
margin-top: 20px;
margin-left: 20px;
}
/* 省份样式 */
.province {
width: 200px;
}
.province .title {
text-align: center;
height: 30px;
line-height: 30px;
background-color: rgb(13, 107, 131);
color: white;
}
/* 城市样式 */
.city {
background-color: rgb(65, 190, 221);
color: white;
line-height: 30px;
text-align: center;
}
.city>li {
cursor: pointer;
/* 相对定位 */
position: relative;
}
.city>li:hover .district{
display: block;
}
/* 区县样式 */
.district {
position: absolute;
width: 200px;
left: 200px;
top: 0px;
background-color: rgb(73, 231, 218);
display: none;
}
</style>
2.使用html搭建出框架，方便之后使用js来操作
代码如下：
<div class="main">
<!-- <div class="province">
<div class="title">江苏省</div>
<ul class="city">
<li>
南京市
<ul class="district">
<li>秦淮区</li>
<li>建邺区</li>
</ul>
</li>
<li>苏州市</li>
</ul>
</div> -->
</div>
(在后面，js完成html的搭建后，可以注释掉这些代码)
3.引入需要添加到html中的数据
（1）可以使用外部引入（例如：js文件），也可以直接内部引用
这边我们直接内部引用数据：
// 数据数组
let data = [
{
"id": 1,
"name": "江苏省",
"pid": 0
},
{
"id": 101,
"name": "南京市",
"pid": 1
},
{
"id": 10101,
"name": "秦淮区",
"pid": 101
},
{
"id": 10102,
"name": "玄武区",
"pid": 101
},
{
"id": 10103,
"name": "鼓楼区",
"pid": 101
},
{
"id": 102,
"name": "苏州市",
"pid": 1
},
{
"id": 10201,
"name": "姑苏区",
"pid": 102
},
{
"id": 10202,
"name": "虎丘区",
"pid": 102
},
{
"id": 2,
"name": "浙江省",
"pid": 0
},
{
"id": 201,
"name": "杭州市",
"pid": 2
},
{
"id": 20101,
"name": "江干区",
"pid": 201
},
{
"id": 20102,
"name": "滨江区",
"pid": 201
},
{
"id": 202,
"name": "温州市",
"pid": 2
},
{
"id": 20201,
"name": "鹿城区",
"pid": 202
},
{
"id": 20202,
"name": "龙湾区",
"pid": 202
},
{
"id": 3,
"name": "安徽省",
"pid": 0
},
{
"id": 301,
"name": "合肥市",
"pid": 3
},
{
"id": 30101,
"name": "蜀山区",
"pid": 301
},
{
"id": 30102,
"name": "庐阳区",
"pid": 301
},
{
"id": 302,
"name": "马鞍山市",
"pid": 3
},
{
"id": 30201,
"name": "花山区",
"pid": 302
},
{
"id": 30202,
"name": "雨山区",
"pid": 302
},
{
"id": 30203,
"name": "马鞍区",
"pid": 302
}
]
以上就是我们需要的数据
（2）编写js代码
代码如下：
//1.从数组中获取所有的省份信息
let main = document.querySelector('.main')
data.filter(r => r.pid === 0).forEach(p => {
// 1.2.每一个省份需要创建一个province
let div_p = document.createElement('div')
div_p.className = 'province'
// 1.3.每一个省份需要创建一个title
let div_t = document.createElement('div')
div_t.className = 'title'
div_t.innerHTML = p.name
// 1.4.将title添加到province中
div_p.appendChild(div_t)
// 1.5.创建每个省份所有城市的ul
let ul_c = document.createElement('ul')
ul_c.className = 'city'
// 1.6.将城市ul添加到province中
div_p.appendChild(ul_c)
// 2.从数组中获取当前省份对应的城市信息
data.filter(r => r.pid === p.id).forEach(a => {
// 2.1.创建每个城市的li
let li_c = document.createElement('li')
li_c.innerHTML = a.name
// 2.2.将每个城市的li，添加到城市的ul中
ul_c.appendChild(li_c)
// 2.3.创建每个城市的所有区县的ul
let ul_d = document.createElement('ul')
ul_d.className = 'district'
// 2.4.将区县ul添加到city中
li_c.appendChild(ul_d)
// 3.从数组中获取当前城市对应的区县信息
data.filter(r => r.pid === a.id).forEach(b => {
// 3.1.创建每个区县的li
let li_d = document.createElement('li')
li_d.innerHTML = b.name
// 3.2.将每个区县li添加到区县ul中
ul_d.appendChild(li_d)
})
})
// 1.7.将province添加都main中
main.appendChild(div_p)
})
扫一扫
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
