<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>menu</title> </head> <body> <select id="province" onchange="func1()">Province</select> <select id="city" onchange="func2()">city</select> <script> data={"Jilin":["Changchun","Baicheng"],"Liaoning":["Shengyang","Tieling"],"Heilongjiang":["Haerbin","Mudanjing"]}; var pro=document.getElementById("province"); for (var i in data){ var opt=document.createElement("option"); opt.innerHTML=i; opt.value=i;pro.appendChild(opt); } function func1(){ var pro=document.getElementById("province"); var City=document.getElementById("city"); var city=pro.value; City.options.length=0; for (var i in data[city]){ var city_name=document.createElement("option"); city_name.innerHTML=data[city][i]; city_name.value=data[city][i]; City.appendChild(city_name); } console.log(city); } function func2(){ var pro=document.getElementById("city"); console.log(pro.value); } </script> </body> </html>
初始运行界面如上图,每次点击省名,右侧的市名会变成所选省的市名.可以通过修改字典data的内容,动态实现省市名称的增加或删除或改变.