版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
一、需求
实例：省市二级联动下拉列表
- 打开页面默认的省和市下拉框的的值分别为：“请选择省份”、“请选择城市”。
- 在省下拉框选择一个省份，市下拉框则显示相应城市名称。
然后就可以进行愉快的选择啦！
二、最终实现
1、HTML源码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>省市二级联动下拉列表实例</title>
<script src="js/select.js"></script>
</head>
<body>
<select id="s1"></select>
<select id="s2"></select>
</body>
</html>
2、JS源码：
var city = {'请选择省份': ['请选择城市'],
'河北': ['石家庄', '廊坊', '邯郸', '沧州'],
'山东': ['青岛', '烟台', '济南']}
window.onload = function() {
var select1 = document.getElementById("s1");
var select2 = document.getElementById("s2");
//初始化省下拉框
for (let i in city) {
select1.add(new Option(i, i), null);
}
//初始化市下拉框
select2.add(new Option(city[select1.value][0], city[select1.value][0]), null);
//给省下拉框添加事件
select1.addEventListener("change", function(){
select2.length = 0; //每次都先清空一下市级菜单
for (let i in city[select1.value]) {
select2.add(new Option(city[select1.value][i], city[select1.value][i]), null);
}
});
}