<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
请选择省份<select id="provice">
</select>
请选择城市<select id="citys">
</select>
<script>
data={"河北省":["石家庄","廊坊"],"江苏":["徐州","南京"],"山东":["菏泽","济南"]};
var pro_els=document.getElementById("provice");
var citys_els=document.getElementById("citys");
for(var i in data)
{
var ele=document.createElement("option");//创建标签
ele.innerHTML=i;//给标签赋值
pro_els.appendChild(ele);//在父节点里面添加进去
}
pro_els.onclick=function () {
// console.log(this.selectedIndex);//找到选择目标的索引
// console.log(data[this.selectedIndex]);
// console.log(this.options[this.selectedIndex]);//通过索引找到里面的内容。
citys_els.options.length=0;//清空,
var cityss=data[this.options[this.selectedIndex].innerHTML];//通过上面你的那个标签找到里面的内容
console.log(cityss);
// var sle_Citys=document.createElement("option");
for(var i in cityss ){
var sle_Citys=document.createElement("option");
sle_Citys.innerHTML=cityss[i];//把上面你的文件加入里面;
citys_els.appendChild(sle_Citys);
}
}
</script>
</body>
</html>