代码演示
这是纯JS代码,地区代码在见下方完整代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./data.js"></script>
<style>
select {
height: 40px;
margin: 0 5px;
padding: 10px;
color: #666;
border: 1px solid #c0c4cc;
border-radius: 4px;
transition: all 0.5s;
outline: none;
}
select:hover {
border: 1px solid #409dfe;
}
</style>
</head>
<body>
<div style="width: 500px;color: #666;margin: 50px auto;">
省:<select class="sheng">
<option>-请选择-</option>
</select>
市:<select class="shi">
<option>-请选择-</option>
</select>
区:<select class="qu">
<option>-请选择-</option>
</select>
</div>
<script>
// 省
var sheng = document.querySelector('.sheng');
// 市
var shi = document.querySelector('.shi');
// 区
var qu = document.querySelector('.qu');
// 渲染省
for (var i = 0; i < data.length; i++) {
// 创建一个option
var opt = document.createElement('option');
// 赋值给它
opt.innerHTML = data[i].name; //data[i].name就是所有的省名称
// 添加到省的这个下拉列表里
sheng.appendChild(opt);
// 鼠标离开省这个列表就会触发表单失去焦点事件:也就意味着选好省了
sheng.onblur = function () {
// 循环
for (var i = 0; i < data.length; i++) {
// 用selectedIndex属性可以获取被选中的那个option的索引下标
// 比如选择的省是:河南 。那么this[this.selectedIndex].value就得到的是河南
// 循环找出选择的河南这个省
if (this[this.selectedIndex].value == data[i].name) {
// 每查找一次就先将之前的option元素清除,不然会叠加在一块
shi.innerHTML = '<option>-请选择-</option>';
// 将他的城市循环遍历出来,有多少个城市就遍历多少次
for (var j = 0; j < data[i].cityList.length; j++) {
// 创建option
var opt = document.createElement('option');
// 赋值给它
// 此时:
// data[i] = 河南
// cityList[j].name = 河南所有的城市
opt.innerHTML = data[i].cityList[j].name
// 最后赋值
shi.appendChild(opt);
}
}
}
}
}
// 循环遍历城市的区域,比如当前市是郑州
shi.onblur = function () {
for (var i = 0; i < data.length; i++) {
// 有多少城市就循环多少次
for (var j = 0; j < data[i].cityList.length; j++) {
// this[this.selectedIndex].value = 郑州
// 循环找到指定的郑州这个城市 data[i].cityList[j].name
if (this[this.selectedIndex].value == data[i].cityList[j].name && sheng[sheng.selectedIndex].value == data[i].name) {
qu.innerHTML = '<option>-请选择-</option>';
// 如果找到郑州就满足条件就将郑州所有地区赋值即可
for (var k = 0; k < data[i].cityList[j].areaList.length; k++) {
var opt = document.createElement('option');
// data[i].cityList[j].name = 所有城市
// data[i].cityList[j].areaList[k] = 所有地区
opt.innerHTML = data[i].cityList[j].areaList[k];
qu.appendChild(opt);
}
}
}
}
}
</script>
</body>
</html>
希望明年能够实现月薪过万的目标,这也是我的目标 哈哈哈