<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<!-- 注意：在写的时候注意有的地方要有分号;，还有有的地方是锁定id位置还是id位置的值。 -->
<!-- 调试了很久，第三个下拉框一直锁定不到，原因就在于第二个下拉框会触发第三个下拉框显示，但是第二个下拉框没有给定id值，就算设置了onChange()，也没有用还是定位不到。 -->
</head>
<script>
function $(id) {
return document.getElementById(id);
}
//数组
var shens = [
["", "点击选择"],
["sichuan", "四川"],
["shanxi", "陕西"]
]
//json
var shis = {
"sichuan": [["", "点击选择"],["chengdu", "成都"], ["mianyang", "绵阳"]],
"shanxi": [["", "点击选择"],["xian", "西安"], ["xianyang", "咸阳"]]
}
var xians = {
"chengdu": [["", "点击选择"],["jinjiang", "锦江区"], ["wuhou", "武侯区"]],
"mianyang": [["", "点击选择"],["xianyou", "仙游区"], ["fucheng", "涪城区"]],
"xian": [["", "点击选择"],["weiyang", "未央区"], ["changan", "长安区"]],
"xianyang": [["", "点击选择"],["qindu", "秦都区"], ["weicheng", "渭城区"]]
}
function addShen() {
for (var i in shens) {
// console.log(i);
var shen = shens[i];
// console.log(shen);
var opt = "<option value=" + shen[0] + ">" + shen[1] + "</option>"
var selectShen = $("selectshen").innerHTML += opt;
}
}
function addShi() {
var shenKey = $("selectshen").value;
// console.log(shenKey)
var myshis = shis[shenKey];
// console.log(myshis)
var spanshi = $("spanshi");
// console.log(spanshi)
// 注意：这里新建一个select一定要给id值，不然第三个下拉框spanxian找不到位置。
// 这是在script里面直接建立下拉框的语句
var html = "<select id=\"cxk\" onChange='addXian()'>"
// console.log(html)
for (var i in myshis) {
// console.log(i)
html += "<option value=" + myshis[i][0] + ">" + myshis[i][1] + "</option>"
// html+=`<option value=`+myshis[i][0]+`
// >`+myshis[i][1]+`
// </option>
// `
}
html += "</select>"
spanshi.innerHTML = html;
}
function addXian() {
var shisKey = $("cxk").value;
// console.log(xiansKey)
var myxians = xians[shisKey];
var spanxian = $("spanxian");
var html = "<select>"
// console.log(myxians)
for (var j in myxians) {
// console.log(j)
html+="<option value="+myxians[j][0]+">"+myxians[j][1]+"</option>"
}
html+="</select>"
spanxian.innerHTML=html;
}
</script>
<body onload="addShen()">
<div>
<select id="selectshen" onchange="addShi()">
<!-- <option></option> -->
</select>
<span id="spanshi"></span>
<span id="spanxian"></span>
</div>
</body>
</html>