【基于HTML5的网页设计及应用】——二级级联菜单

🎃个人专栏：

🐬 算法设计与分析：算法设计与分析_IT闫的博客-CSDN博客

🐳Java基础：Java基础_IT闫的博客-CSDN博客

🐋c语言：c语言_IT闫的博客-CSDN博客

🐟MySQL：数据结构_IT闫的博客-CSDN博客

🐠数据结构：​​​​​​数据结构_IT闫的博客-CSDN博客

💎C++：C++_IT闫的博客-CSDN博客

🥽C51单片机：C51单片机（STC89C516）_IT闫的博客-CSDN博客

💻基于HTML5的网页设计及应用：基于HTML5的网页设计及应用_IT闫的博客-CSDN博客​​​​​​

🥏python：python_IT闫的博客-CSDN博客

🐠离散数学：离散数学_IT闫的博客-CSDN博客

​​​​​​🥽Linux：​​​​Linux_Y小夜的博客-CSDN博客

🚝Rust：Rust_Y小夜的博客-CSDN博客

欢迎收看，希望对大家有用！

目录

🎯功能简介

🎯代码解析

🎯核心代码

🎯效果展示

---

🎯功能简介

这段代码实现了一个二级级联下拉菜单，可以选择省份和城市。

用户可以在省份下拉菜单中选择一个省份，然后城市下拉菜单会根据选择的省份显示对应的城市选项。如果重新选择了省份，则城市选项会根据新选择的省份进行更新。

代码中定义了一个`provinceList`数组，存储了所有的省份名称。`cityList`是一个二维数组，存储了每个省份对应的城市名称。

在页面加载时，通过调用`showAllProvince`函数，会将所有的省份添加到省份下拉菜单中。

当选择了省份后，会调用`showCity`函数来显示对应的城市选项。如果选择了"-1"（"--请选择省份--"选项），则会重新加载页面，重置城市选项。

你可以根据实际需求修改`provinceList`和`cityList`数组中的数据，以及调整相关提示信息，使其适应你的需求。

🎯代码解析

<select id="Province" onchange="showCity();" style="width:100px">
    <option value="-1">--请选择省份--</option>
</select>

这部分代码定义了一个下拉菜单（省份），当选择其中的一个选项时，会触发showCity()函数来显示对应省份的城市选项。初始状态下，有一个默认选项"--请选择省份--"。

var provinceList = ['北京市', '上海市', '广东省', '深圳市', '重庆市', '天津市', '江苏省', '浙江省', '四川省', '海南省', '福建省', '山东省', '江西省', '广西省', '安徽省', '河北省', '河南省', '湖北省', '湖南省', '陕西省', '山西省', '黑龙江省', '其他'];
var cityList = [
    ['朝阳区', '东城区', '西城区', '海淀区', '宣武区', '丰台区', '怀柔', '延庆', '房山'],
    ['宝山区', '长宁区', '丰贤区', '虹口区', '黄浦区', '青浦区', '南汇区', '徐汇区', '卢湾区'],
    ['广州市', '惠州市', '汕头市', '珠海市', '佛山市', '中山市', '东莞市'],
    ['福田区', '罗湖区', '盐田区', '宝安区', '龙岗区', '南山区', '深圳周边'],
    ['俞中区', '南岸区', '江北区', '沙坪坝区', '九龙坡区', '渝北区', '大渡口区', '北碚区'],
    ['和平区', '河西区', '南开区', '河北区', '河东区', '红桥区', '塘古区', '开发区'],
    ['南京市', '苏州市', '无锡市'],
    ['杭州市', '宁波市', '温州市'],
    ['成都市', '绵阳市'],
    ['海口市', '三亚市'],
    ['福州市', '厦门市', '泉州市', '漳州市'],
    ['济南市', '青岛市', '烟台市'],
    ['南昌省', '九江市'],
    ['柳州市', '南宁市'],
    ['合肥市', '芜湖市'],
    ['石家庄市', '邯郸市'],
    ['郑州市', '洛阳市'],
    ['武汉市', '宜昌市'],
    ['长沙市', '浏阳市'],
    ['西安市', '宝鸡市'],
    ['太原市', '大同市'],
    ['哈尔滨市', '齐齐哈尔市'],
    ['其他']
];

这部分代码定义了provinceList数组，存储了所有的省份名称；cityList是一个二维数组，存储了每个省份对应的城市名称。

function showAllProvince() {
    for (var x in provinceList) {
        var newopt = new Option(provinceList[x], x);
        province.add(newopt);
    }
}

这段代码定义了showAllProvince函数，在页面加载时调用，将所有的省份添加到省份下拉菜单中。

function showCity() {
    city.options.length = 0;
    if (province.value != -1)
        for (var x of cityList[province.value]) {
            var newopt = new Option(x);
            city.add(newopt);
        }
    else
        location.reload();
}

这段代码定义了showCity函数，当选择了省份后调用，根据选择的省份显示对应的城市选项。如果选择了"-1"（"--请选择省份--"选项），则会重新加载页面，重置城市选项。

🎯核心代码

<select id="Province" onchange="showCity();" style="width:100px">
    <option value="-1">--请选择省份--</option>
</select>

🎯效果展示