<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>选择地区</title> </head> <script type="text/javascript"> var regionList=[]; regionList["湖南省"]=["长沙市","株洲市","邵阳市"]; regionList["广东省"]=["广州市","深圳市","东莞市"]; onload=function(){ var selectProvince=document.querySelector("#province"); //这个地方使用for(var i=0;i<region.length;i++)就会报错，不知道是为啥，麻烦知道的大神给指导下哈 for(var i in regionList){ var element=document.createElement("OPTION"); element.value=i; element.innerHTML=i; selectProvince.appendChild(element); } } function changeCity(){ var selectProvince=document.querySelector("#province"); var selectCity=document.querySelector("#city"); selectCity.innerHTML="<option>请选择城市/地区</option>"; for(var i in regionList[selectProvince.value]){ var element=document.createElement("OPTION"); element.value=regionList[selectProvince.value][i]; element.innerHTML=regionList[selectProvince.value][i]; selectCity.appendChild(element); } } </script> <body> <div id="main"> <dl class="register_row"> <dt>所在地区：</dt> <dd> <select id="province" onChange="changeCity()" style="120px;"> <option>请选择省/城市</option> </select> </dd> <dd> <select id="city" style="130px;"> <option>请选择城市/地区</option> </select> </dd> </dl> </div> </body> </html>