客户端练习联动

最新推荐文章于 2025-02-14 22:50:50 发布

原创最新推荐文章于 2025-02-14 22:50:50 发布 · 259 阅读

CC 4.0 BY-SA版权

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<select name="" id="sel">
<option value="cd" selected>成都</option>
<option value="my">绵阳</option>
<option value="zg">自贡</option>
</select>

<select name="" id="sel2">
<option value="">请选择</option>
</select>

<script>

var ojson = {
"cd":["青羊区","武侯区"],
"my":["涪城区","老城区"],
"zg":["大安区","自流井"]
};
var osel1 = document.getElementById("sel");
var osel2 = document.getElementById("sel2");
var op = osel1.options[osel1.selectedIndex];

if(op.value=="cd"){
var arr = ojson.cd;
for(var i=0;i<arr.length;i++){
var opt = document.createElement("option");
opt.innerHTML = arr[i];
osel2.appendChild(opt);
}
}

for(var i=0;i<osel1.options.length;i++){
osel1.onchange = function(){
osel2.innerHTML = "";
var key = this.value;
console.info(key);
/*通过键获取到json的value值*/
var arr = ojson[key];
console.info(arr);
for(var i=0;i<arr.length;i++){
var opt = document.createElement("option");
opt.innerHTML = arr[i];
osel2.appendChild(opt);
}
}
}

</script>
</body>
</html>