首页写一段html下拉菜单联动

写一段html下拉菜单联动

时间: 2023-02-25 10:01:47 浏览: 124

以下是一段简单的HTML代码，实现了下拉菜单的联动效果： ``` <!DOCTYPE html> <html> <head> <script> function updateCityList(selectedState) { var stateList = [ {state: "California", cities: ["Los Angeles", "San Francisco", "San Jose"]}, {state: "Texas", cities: ["Houston", "Dallas", "Austin"]}, {state: "Florida", cities: ["Miami", "Tampa", "Orlando"]} ]; var citySelect = document.getElementById("citySelect"); citySelect.options.length = 0; for (var i = 0; i < stateList.length; i++) { if (stateList[i].state == selectedState) { for (var j = 0; j < stateList[i].cities.length; j++) { citySelect.options[citySelect.options.length] = new Option(stateList[i].cities[j], stateList[i].cities[j]); } break; } } } </script> </head> <body> <select id="stateSelect" onchange="updateCityList(this.value)"> <option value="">请选择州</option> <option value="California">加利福尼亚</option> <option value="Texas">德克萨斯</option> <option value="Florida">佛罗里达</option> </select> <br><br> <select id="citySelect"> <option value="">请选择城市</option> </select> </body> </html> ``` 该代码实现了通过选择州名称，动态更新城市名称的下拉菜单。在`<head>`中定义了一个JavaScript函数`updateCityList(selectedState)`，该函数根据选择的州名称，从预定义的状态列表中筛选出对应的城市名称，并将它们加载到城市名称的下拉菜单中。在`<body>`中，我们定义了两个下拉菜单：州名称的下拉菜单和城市名称的

阅读全文