整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
省市区三级联动所需文件：评论回复区
文件说明：
整个文件为一个大的对象（非数组类型）
其中对象的属性名 100000 中包含所有省份，它也是一个对象格式的；
对象名为100000的每个属性中的属性名都为数字类型（其实是该地区的行政代码）。数字属性名对应的属性值是该地区的名称,同时也可以通过该属性名访问到它下级的市列表。
eg:
import districts from './js/districts.js' console.log(districts[100000])
比如当我们想获取到行政代码130000河北省下面的市级列表时：
import districts from './js/districts.js' console.log(districts[130000])
然后当我们想获得行政代码130100石家庄市下的区级列表时：
import districts from './js/districts.js' console.log(districts[130100])
没错，省市中的每一个行政代码属性名都对应着它下一级（省行政代码对应市列表，市行政代码对应区列表）的对象列表。不存在数组对象嵌套。及其简单方便。
创建 option 标签简便API
new Option('innerText', 'value属性对应的值')
类似于传统写法：
let option_1=document.createElement('option')
option_1.text='innerText'
option_1.value='value属性对应的值'
嗯，没什么区别，但是第一种简单很多：
清空 select标签中的option标签极简方法：
selectDOM.options.length=0
.html文件中使用模块化
将 script 标签改为 type 属性改为 module <script type="module">
创建三个 select标签，分别用来存放 省级列表，市级列表，区级列表，并定义好变量：
HTML:
<!-- 省级列表 --> <select id="province"></select> <!-- 市级列表 --> <select id="city"></select> <!-- 区级列表 --> <select id="area"></select>
JS:
// 获取省市区selectDOM节点
let oProvince=document.getElementById('province')
let oCity=document.getElementById('city')
let oArea=document.getElementById('area')
定义一个特定对应，用户将用户选中的结果获取到：
let data={
province: {},
city: {},
area: {}
}
1，引入省市区文件 import districts from './js/districts.js'
直接一个for in 循环 districts[100000] 即可；
然后在循环中创建option标签，并插入到省级select节点中：
let provinceList=districts[100000]
for (let province in provinceList) {
oProvince.options.add( new Option(provinceList[province], province) )
}
效果：
这样我们的第一个select标签就完成了
ps: 市级列表市基于省级之后才开始渲染的，所以应该在省级select改变之后触发（onchange事件）
1,首先拿到用户选中的是第几个option;
通过selectDOM的selectedIndex可拿到对应索引值:
然后通过children获取option子元素列表，之后直接拿对应索引即可！
eg: this.children[this.selectedIndex], 因为是onChange事件，this指代selectDOM。
在操作之前，可以先把用户选中的省份数据存放在我们提前定义好的data对象中的province对象中：
data.province.code=this.children[this.selectedIndex].value data.province.value=this.children[this.selectedIndex].text
即此时数据应为是：
在数据存完之后我们就可以着手渲染我们的市级select标签了。
1，首先不管市级select中有没有option标签，我们先给它清除一遍（因为每个省份对应的市都不一样，如果不清除则下面渲染的市级option列表中含有上一个省份的市级option列表）
oCity.options.length=0
2，清除完成之后我们用省级行政代码（code）去获取对应的市级列表即可：
即districts['省级行政代码'] 等于对应市级列表
districts[data.province.code] // 获取用户选中的省份的市级列表
eg：
拿到该省份的对应市级列表之后，我们只需要向渲染省级列表一样渲染市级列表即可：
第三步同第二步基本完全一样，我们完全可以让它两共用一个函数：
在市级列表的onChange事件触发之后执行，
存储用户选中的市的code以及市名。
用获取到的市级code去换对应的区级列表即可(因为不存在数组对象嵌套，所以同省级code换市列表一样)；
districts[data.province.code] // 获取用户选中的市级的区级列表
在渲染区级之前先清空一直区级select下的option标签列表
eg:
代码同上基本一样，除了需要注意此时我们的存值的对应是我们事先定义好的市级对应city而不是province即可。
区级的 onChange 事件触发，此时我们已经不需要再给渲染新的 select 标签了（因为不是四级联动，其实都一样啦，大不了再复制一层呗）。所以我们只需要把用户选中的结果存放在我们事先定义好的 data 中的 area 区级对象即可。
这样，当用户选择完毕之后，我们就会得到一个很清晰的对象了。
至此基本完工。
初步渲染完成时应该给它下级一个默认值，这样如果用户不选了不至于获取到的数据不完整：
1,渲染完省级列表时默认给它一个选中的市，并存值。
使用element.dispatchEvent().。实现onChange事件初始化触发
参考资料：https://www.jianshu.com/p/5f9027722204
此时浏览器刚刷新数据为：
源码（不含省市区文件，省市区文件将开头）：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
select {
height: 30px;
margin-right: 10px;
}
</style>
</head>
<body>
<!-- 省级列表 -->
<select id="province"></select>
<!-- 市级列表 -->
<select id="city"></select>
<!-- 区级列表 -->
<select id="area"></select>
<script type="module">
// 引入省市区文件
import districts from './js/districts.js'
// 获取省市区selectDOM节点
let oProvince=document.getElementById('province')
let oCity=document.getElementById('city')
let oArea=document.getElementById('area')
// 存储用户选中的值
let data={
province: {},
city: {},
area: {}
}
// 渲染省级select标签
let provinceList=districts[100000]
for (let province in provinceList) {
oProvince.options.add( new Option(provinceList[province], province) )
}
// 当用户选中某个省份时触发
oProvince.addEventListener('change', function() {
// 先清空之前的市级<select>标签下的option列表
oCity.options.length=0
// 保存省级数据
data.province.code=this.children[this.selectedIndex].value
data.province.value=this.children[this.selectedIndex].text
// 渲染市级列表
for(let city in districts[data.province.code]) {
oCity.options.add( new Option(districts[data.province.code][city], city) )
}
}, false)
// 当用户选中某个市时触发
oCity.addEventListener('change', function() {
oArea.options.length=0
// 保存市级数据
data.city.code=this.children[this.selectedIndex].value
data.city.value=this.children[this.selectedIndex].text
// 渲染区级列表
for(let city in districts[data.city.code]) {
oArea.options.add( new Option(districts[data.city.code][city], city) )
}
}, false)
// 当用户选中每个区时触发
oArea.onchange=function () {
// 保存区级数据
data.area.code=this.children[this.selectedIndex].value
data.area.value=this.children[this.selectedIndex].text
}
/**
* 渲染完成初始化
* @params dom selectDOM
*/
function initSelect (dom) {
let createE=document.createEvent('HTMLEvents')
createE.initEvent("change", true, true)
dom.dispatchEvent(createE)
}
initSelect(oProvince)
initSelect(oCity)
initSelect(oArea)
console.log(data)
</script>
</body>
</html>
至此基本完成啦。
用javascript中变量定义省份及对应的城市，应用Select标签对象，实现二级级联的下拉菜单选中效果。也就是说，在省份下拉菜单中，选中一个省份时，在城市下拉菜单中出现对应城市选择内容，效果如下：
当选择广东为省份的时候，城市栏会自动识别广东省下的城市展示出来
当省份选择广东省份的时候，去点击城市的选择栏会出现广东对应的城市选择！
具体代码如下：
html:
javascript：
● 阳光高考网：教育部官方发布网站，有强基计划，综合评价，高校专项等的简章报名或申请 各大学校的招生章程，专业设置，考研和就业信息等。可以查专业、查院校，还有各种志愿填报常见问题汇总等。
https://gaokao.chsi.com.cn/xxgk/
● 本省考试院官网 ：本省的政策批次设置，填报时间，一分一段表，大学往年的投档分，招生计划征集志愿等。要常常登陆该网站，志愿填报也是在该网站进行。比如● 河北省教育考试院http://www.hebeea.edu.cn
● 目标高校的本科招生网：学校和专业的录取分数线，招生计划，院系设置，师资力量等
● 学位与研究生信息网：查询各大学的学科评估结果，哪些专业是好专业 http://www.cdgdc.edu.cn/xwyyjsjyxx/xkpgjg/
● 河北招生考试信息服务网http://www.hebeeb.com
● 中外合作办学监管信息平台
● 大学生必备网https://m.dxsbb.com/news/7454.html 各个省份高校查询
● 研招网：https://yz.chsi.com.cn/wap/
● 公众号：青塔 软科
● 国家高等教育智慧教育平台https://higher.smartedu.cn/subjects
● 报考军校要知道的三个权威信息来源：军校招生（公众号）、黄埔一号v军校（公众号）、中国军网（公众号）
● 志愿填报期间，每天0时—6时为系统维护时间，不能填报志愿。
● 填报志愿网站：https://gk.hebeea.edu.cn
● 高考网址导航http://www.gaokao789.com
● 填报志愿机构汇总 学业有方 https://mall.futuresquare.cn/home
● 考试成绩查询途径如下：
● 1.河北省教育考试院网站：http://www.hebeea.edu.cn
● 2.河北招生考试信息服务网：http://www.hebeeb.com
*请认真填写需求信息，我们会在24小时内与您取得联系。
