<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>省市联动</title>
</head>
<body>
<select name="province" id="pro">
<option value="">请选择省份</option>
<option value="0">北京市</option>
<option value="1">上海市</option>
<option value="2">广东省</option>
</select>
<select name="city" id="city">
<option value="">请选择市区</option>
</select>
<script>
let cityData = new Array();
cityData[0] = ['朝阳区', '海淀区', '丰台区'];
cityData[1] = ['徐汇区', '长宁区', '浦东新区'];
cityData[2] = ['广州市', '深圳市', '佛山市'];
let pro = document.getElementById('pro');
let city = document.getElementById('city');
pro.onchange = function () {
city.innerHTML = '<option value="">请选择市区</option>';
for (let cityName of cityData[this.value]) {
// 注意下面的是反引号``,不是单引号‘’,反引号用${}可以取出变量值
city.innerHTML += `<option value="${cityName}">${cityName}</option>`;
}
}
</script>
</body>
</html>