首页html二级联动下拉列表

html二级联动下拉列表

时间: 2023-07-05 07:31:29 浏览: 183

好的，下面是一个简单的 HTML 二级联动下拉列表的示例代码： ```html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>二级联动下拉列表</title> </head> <body> <label for="province">省份：</label> <select id="province" onchange="changeCity()"> <option value="">请选择</option> <option value="bj">北京</option> <option value="gd">广东</option> <option value="sh">上海</option> </select> <label for="city">城市：</label> <select id="city"> <option value="">请选择</option> </select> <script> var cities = { 'bj': ['北京市'], 'gd': ['广州市', '深圳市', '珠海市'], 'sh': ['上海市'] }; function changeCity() { var province = document.getElementById('province'); var city = document.getElementById('city'); var citiesArray = cities[province.value]; city.innerHTML = ''; if (citiesArray) { for (var i = 0; i < citiesArray.length; i++) { var option = document.createElement('option'); option.value = citiesArray[i]; option.innerHTML = citiesArray[i]; city.appendChild(option); } } } </script> </body> </html> ``` 这个示例中，我们创建了两个下拉列表框，一个是省份列表，一个是城市列表。当省份列表改变时，我们使用 JavaScript 动态生成对应的城市列表。具体实现方法是，我们定义一个 cities 对象，它包含了所有省份对应的城市数组。当省份列表改变时，我们根据当前选中的省份值从 cities 对象中取出对应的城市数组，再通过 JavaScript 动态生成城市列表。

阅读全文