<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<select name="" id="provinces">
<option value="">请选择省份</option>
</select>
<select name="" id="citys">
<option value="">请选择城市</option>
</select>
<script>
data={'江西省':['南昌市','赣州市'],'广东省':['广州市','深圳市'],'广西省':['桂林市','柳州市']};
var pro_ele=document.getElementById('provinces');
var city_ele=document.getElementById('citys');
// 获取到两个父节点，用于添加子节点
for (var i in data) {
var ele=document.createElement('option'); // 创建'option'标签
ele.innerHTML=i; // option标签文本内容为data的键
pro_ele.appendChild(ele); // 父节点添加子节点
};
pro_ele.onchange=function () {
// onchange事件：域的内容被改变
console.log(this.selectedIndex); // this指的是第一个select标签，selectedIndex设置或者返回select对象已选选项的索引值。(以 0 起始)
console.log(this.options[this.selectedIndex]); // options返回一个数组，数组里有对应的option标签
var citys=data[this.options[this.selectedIndex].innerHTML]; // 得到data对象里的键所对应的值
city_ele.options.length=1; // length属性返回集合的option元素数目，设置默认值即能清空之前所选择添加的数据；如果没有这个默认，那么会有BUG(即选择了的数据不会删除只会累加)
for (var i=0; i<citys.length; i++) {
// 循环遍历citys数组
var ele=document.createElement('option'); // 创建'option'标签
ele.innerHTML=citys[i]; // 设置option标签文本内容
city_ele.appendChild(ele); // 父节点添加子节点
};
};
</script>
</body>
</html>