JS（JavaScript）二级菜单级联案例演示

天行健，君子以自强不息；地势坤，君子以厚德载物。

每个人都有惰性，但不断学习是好好生活的根本，共勉！

文章均为学习整理笔记，分享记录为主，如有错误请指正，共同学习进步。

小时不识月，呼作白玉盘。
又疑瑶台镜，飞在青云端。
——《古朗月行》

文章目录

JS（JavaScript）二级菜单级联案例演示
- 1. 目标效果
- 2. 注意事项
- 3. 示例代码
- 4. 页面效果
- 5. 示例代码下载

JS（JavaScript）二级菜单级联案例演示

使用下拉列表实现二级菜单联动的效果

1. 目标效果

实现省份和城市的下拉列表关联，选择省份后，在城市的下拉列表中展示对应省份的城市
在这里插入图片描述

2. 注意事项

window.onload 页面加载完后执行
在选择省份后需要清空之前的城市列表，不然会导致城市列表累加数据

3. 示例代码

示例代码如下

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>事件处理-二级菜单的联动</title><script>var provinces = [{pid:10001,name:"安徽省",cities:[{cid:1000101,name:"合肥市"},{cid:1000102,name:"芜湖市"},{cid:1000103,name:"阜阳市"},{cid:1000104,name:"黄山市"},{cid:1000105,name:"亳州市"}]},{pid:10002,name:"山东省",cities:[{cid:1000101,name:"济南市"},{cid:1000102,name:"菏泽市"},{cid:1000103,name:"曲阜市"},{cid:1000104,name:"烟台市"},{cid:1000105,name:"大连市"}]},{pid:10003,name:"河南省",cities:[{cid:1000101,name:"郑州市"},{cid:1000102,name:"开封市"},{cid:1000103,name:"信阳市"},{cid:1000104,name:"安阳市"},{cid:1000105,name:"商丘市"}]},{pid:10004,name:"江苏省",cities:[{cid:1000101,name:"南京市"},{cid:1000102,name:"苏州市"},{cid:1000103,name:"盐城市"},{cid:1000104,name:"扬州市"},{cid:1000105,name:"徐州市"}]}];window.onload=function(){for(var i in provinces){var province = provinces[i];//Option的参数为（页面显示的文本值，属性value的值）var option = new Option(province.name, province.pid);document.getElementById("province").add(option);}};//触发事件 将省份和城市关联，选中指定省份在城市列表中显示对应的城市function changeP(){//清空城市数据  每次触发时，清空之前的内容，不然会累加内容到城市列表document.getElementById("city").length=0;// document.getElementById("province").length=0;//获取省份的pidvar pid = document.getElementById("province").value;if(pid==0){document.getElementById("city").add(new Option("---请选择城市---"));return;}for(var i in provinces){var piddoc = provinces[i];if(pid==piddoc.pid){//添加省份var cities = piddoc.cities;for(var j in cities){var city = cities[j];var option = new Option(city.name, city.cid);// var option = Option(cities[j].name, cities[j].cid);document.getElementById("city").add(option);}//找到对应的省后不再继续循环return;}}}</script></head>
<body>省份：<select name="" id="province" onchange="changeP()"><option value="0">---请选择省份---</option></select>城市：<select name="" id="city"><option value="0">---请选择城市---</option></select></body>
</html>