<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<select id="province" οnchange="func1(this)" >
</select>
<select id="city">
</select>
</body>
<script>
data={"河北省":["邯郸","廊坊"],"北京":["海淀","朝阳"],"山东":["青岛","济南"]}
var pro=document.getElementById("province")
var city=document.getElementById("city")
for (var i in data){
var option_pro=document.createElement("option")
option_pro.innerHTML=i;
pro.appendChild(option_pro);
}
function func1(self){
var choice=(self.options[self.selectedIndex]).innerHTML
var options=city.children;
<!-- for(var k=0;k<options.length; k++){-->
<!-- city.removeChild(options[k]);-->
<!-- k--;-->
<!-- }-->
city.options.length=0;
for (var i in data[choice]){
var option_city=document.createElement("option")
option_city.innerHTML=data[choice][i];
city.appendChild(option_city);
}
}
</script>
</html>
