<!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="width:120px;">
<option>请选择省/城市</option>
</select>
</dd>
<dd>
<select id="city" style="width:130px;">
<option>请选择城市/地区</option>
</select>
</dd>
</dl>
</div>
</body>
</html>
