目录
- 写在开头
- 功能介绍
- 页面创建
- 样式创建
- 逻辑实现
- 结尾总结
写在开头
上期代码主要实现手风琴效果，开发久了很多功能都是通过框架组件库来完成，但是如果组件满足不了开发需求，还需要开发人员手动封装组件，专门出这样一期文章，通过原生js实现一些特定功能，功能也比较简单，也是想借助这样一个简单的功能，然后来帮助大家了解我们JavaScript，在前端中的作用，另外也培养下我们的代码思维，那我们本次就通过由简单到复杂循序渐进，后续专栏中我们会带领大家用前端实现视频网站中重磅推荐模块、图片放大镜、积分抽奖、拼图、无缝轮播图、图片瀑布流、读心术小游戏等等有趣的小功能，纯前端语言实现，都会陆续带给大家。
功能介绍
类似省市区三级联动选择效果，可参考Vant组件库 Area 省市区选择
页面创建
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link rel="stylesheet" href="./demo.css">
</head>
<body><ul class="container"><li class="item"><div class="left">省份</div><div class="right"><select name="province" id="province"><option value="000">请选择</option></select></div></li><li class="item"><div class="left">城市</div><div class="right"><select name="city" id="city"><option value="000">请选择</option></select></div></li><li class="item"><div class="left">院校</div><div class="right"><select name="school" id="school"><option value="000">请选择</option></select></div></li></ul><script src="../AllSchool.js"></script><script src="./demo.js"></script>
</body>
</html>
样式创建
*{padding: 0;margin: 0;list-style: none;
}
body{background-color: bisque;
}.container {width: 300px;margin: 0 auto;
}
.item{width: 100%;height: 42px;background-color: #fff;border-radius: 15px;margin-bottom: 15px;
}
.left{display: inline-block;height: 42px;line-height: 42px;margin: 0 10px;color:rgba(73, 74, 74, 0.514);
}
.left::after{content: '|';display: inline-block;color: rgba(73, 74, 74, 0.514);padding-left: 15px;font-weight: 500;
}
.right{display: inline-block;height: 42px;width: 210px;color: rgb(31, 31, 31);
}
select{width: 100%;height: 30px;/* 透明 */border-color: transparent;
}
逻辑实现
// 页面初始化//获取操作dom
let provinceDom = document.getElementById('province');
let cityDom = document.getElementById('city');
let schoolDom = document.getElementById('school');// 渲染省份列表
for (const prop in province) {if (Object.hasOwnProperty.call(province, prop)) {let optionDom = document.createElement('option')const element = province[prop];optionDom.value = prop;optionDom.innerText = element;provinceDom.appendChild(optionDom);}
}// 省份变化的时候，获取省份编号provinceDom.onchange = function(){// 每次选择先清空之前内容cityDom.innerText = '';// 获得省份编号let numPro = provinceDom.value;// 通过省标号，获取城市信息let citys = city[numPro]// 遍历渲染城市信息for (const cit in citys) {if (Object.hasOwnProperty.call(citys, cit)) {let options = document.createElement('option')const element = citys[cit];options.value = cit;options.innerText = element;cityDom.appendChild(options); }}//默认值,选中城市后，学院及时展示出来let num = cityDom.value;//城市编号let univer = allschool[num]// 遍历for (let index = 0; index < univer.length; index++) {const element = univer[index];let options = document.createElement('option')options.innerText = element;schoolDom.appendChild(options);}}// 城市变化的时候，获取城市编号
cityDom.onchange = function () {// 每次选择先清空之前内容schoolDom.innerText = '';// 获得城市编号let numCity = cityDom.value;// 通过城市编号，获得学院信息let schools = allschool[numCity];// 遍历渲染院校信息for (const scho in schools) {if (Object.hasOwnProperty.call(schools, scho)) {const element = schools[scho];let optSchool = document.createElement('option')optSchool.value = scho;optSchool.innerText = element;schoolDom.appendChild(optSchool);}}
}
结尾总结
1.HTML部分写出省选择框，样式调整好之后，CV直接把城市学校选择直接完成
2.页面，样式画好之后开始写js部分
3.js部分先把整体要做什么想好，把整体框架先想好
- 页面初始化
- 渲染省份列表
- 选好省份，展示city
- 选好city，展示院校