当选择第一个下拉框的城市的时候，第二个下拉框会级联第一个下拉框，若第一个下拉框没有选择，第二个下拉框为空
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>下拉框城市联动</title> <style> select {width: 200px; height: 30px;} </style> <script> function fillcity() { var province = document.getElementById("province").value; switch (province) { case "四川": var cities = ["成都", "内江", "绵阳", "南充"]; break; case "云南": var cities = ["昆明", "大理", "丽江", "楚雄"]; break; case "湖南": var cities = ["长沙", "郴州", "岳麓", "安定"]; break; case "江苏": var cities = ["苏州", "南京", "扬州", "镇江"]; break; } for (var i=0; i<cities.length; i++) { var city = document.getElementById("city"); city.options[i] = new Option(cities[i], cities[i]); }; } </script> </head> <body> <select id="province" onchange="fillcity()"> <option value="空值" selected="selected">请选择省份</option> <option value="四川">四川</option> <option value="云南">云南</option> <option value="湖南">湖南</option> <option value="江苏">江苏</option> </select> <select id="city"></select> </body> </html>