最近学习前端js，做了一个二级联动下拉菜单。二级下拉菜单的内容随着一级下拉菜单选项的更改而更改。菜单的内容是手动存在js的数组里的，随便写了几个数据。
效果图：
实现源码：
<!DOCTYPE html><html><head><meta charset="utf-8"><title></title></head><script type="text/javascript">var proList=["北京","山东","河南","河北"];var allCityList=[["东城","西城","朝阳","丰台","石景山"],["济南","青岛","泰安","威海","潍坊","枣庄"],["郑州","开封","洛阳","平顶山","安阳","鹤壁","新乡"],["石家庄","唐山","邢台"]];function f1(){var pro=document.getElementById("province");pro.length=proList.length+1;for(var i=1;i<pro.length;i++){pro[i].innerHTML=proList[i-1];pro[i].value=i;}}function f2(){var city=document.getElementById("city");var pro=document.getElementById("province");city.value=0;var cityList=allCityList[pro.value-1];city.length=cityList.length+1;for(var i=1;i<city.length;i++){city[i].innerText=cityList[i-1];city[i].value=i;}}</script><body><form action="#" method="get"><select name="province" id="province" onfocus="f1()" onchange="f2()"><option value="0">选择省份</option></select> 省<select name="city" id="city"><option value="0">选择城市</option> </select> 市/区</form></body></html>
