首页用html和js写一个可以二级联动的选择框

用html和js写一个可以二级联动的选择框

时间: 2023-12-25 10:02:53 浏览: 130

下面是一个简单的HTML和JavaScript代码，实现了二级联动的选择框： ```html <!DOCTYPE html> <html> <head> <title>二级联动选择框</title> </head> <body> <div> <label for="province">省份：</label> <select id="province" onchange="getCity()"> <option value="">请选择</option> <option value="beijing">北京</option> <option value="shanghai">上海</option> </select> </div> <div> <label for="city">城市：</label> <select id="city"> <option value="">请选择</option> </select> </div> <script> // 城市数据 var cityData = { "beijing": ["东城区", "西城区", "朝阳区", "海淀区"], "shanghai": ["黄浦区", "徐汇区", "长宁区", "静安区"] }; function getCity() { var province = document.getElementById("province"); var city = document.getElementById("city"); // 获取选中的省份 var provinceValue = province.value; // 清空城市选择框 city.innerHTML = ""; // 如果选择了省份，则显示对应的城市列表 if (provinceValue) { // 获取城市数据 var cityArray = cityData[provinceValue]; // 添加城市选项 for (var i = 0; i < cityArray.length; i++) { var option = document.createElement("option"); option.text = cityArray[i]; option.value = cityArray[i]; city.add(option); } } } </script> </body> </html> ``` 这个代码实现了一个省份和城市的二级联动选择框。当用户选择省份时，程序会根据省份的值获取相应的城市数据，并将城市选项添加到城市选择框中。用户可以在城市选择框中选择城市。

阅读全文