<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
// <!--做一个表格，省去联动案例，字典套列表-->
var data= {"北京":["草阳区","海淀区"],"山东":["廊坊","邯郸"],"上海":["浦东","浦西"]}
// <!--第一步：建一个表-->
</script>
</head>
<body>
<p>
省份：
<select name="province" id="id_provice">
</select>
</p>
<p>
城市：
<select name="city" id="id_city">
</select>
</p>
</body>
<script>
var data= {"北京":["草阳区","海淀区"],"山东":["廊坊","邯郸"],"上海":["浦东","浦西"]}
// 获取我们省份的标签。
var proEle=document.getElementById("id_provice");
var citysEle = document.getElementById("id_city");
//确定我们所有的列表
for (row in data){
console.log(row);
// 不对添加标签
var opEle=document.createElement("option");
// 将我们的value值添加进去
opEle.innerText=row;
// 将这个标签添加到我们的整个标签中
proEle.appendChild(opEle);
}
//获取text,然后在字典匹配。
proEle.onchange=function () {
console.log(proEle.value); //如果不写value属性，默认就是text属性
var city_list=data[proEle.value];
for (let i=0; i<city_list.length;i++)
{
//清空option市级再添加
if(i==0){
citysEle.innerHTML = ''; //判断一下在清空，否则只有一条option存在，它会将子标签的text值全部清空。
}
//创建一个option标签
var cityEle=document.createElement("option");
// 将数据全部写进去
cityEle.innerText=city_list[i];
console.log(city_list[i]);
citysEle.appendChild(cityEle);
}
}
</script>
</html>
