HTML三级联动

最新推荐文章于 2023-02-27 09:55:09 发布

蘸着辣椒吃西瓜

最新推荐文章于 2023-02-27 09:55:09 发布

阅读量1.8k

点赞数

文章标签： HTML 三级联动 JS实现

本文链接：https://blog.csdn.net/weixin_38917543/article/details/72716903

版权

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>三级联动</title>

</head>
<body>
<select οnchange="_show(this)"></select>省
<select οnchange="_xian(this)"></select>市
<select></select>县
</body>
</html>
<script>
var s = ["四川","福建"];
var ds = [["成都","绵阳","广安","德阳","南充"],["厦门","莆田","福州","泉州"]];
var xian = [[["金堂","成华"],["金堂","成华"],["金堂","成华"],["金堂","成华"],["金堂","成华"]],[["金堂","成华"],["金堂","成华"],["金堂","成华"],["金堂","成华"]]];
//得到省的下拉对象
var sheng = document.getElementsByTagName("select")[0];
for(var i =0;i<s.length;i++){
var op = document.createElement("option");//创建元素节点
op.setAttribute("value",i);//设置元素节点的属性
var tx = document.createTextNode(s[i]);//创建文本节点
op.appendChild(tx);//把文本节点放在元素节点中
sheng.appendChild(op);//把元素节点放在select对象中

}

//这个方法是生产地市下拉列表的，但是是有省的下来修改之后触发
function _show (obj) {
var sVal = obj.value;//得到省的编码值
//得到市的select对象
var shi = document.getElementsByTagName("select")[1];
shi.innerText = "";//?偷懒

//通过省的编码，得到市的一维数组，在循环一维数组
for(var i =0;i<ds[sVal].length;i++){
var op = document.createElement("option");//创建元素节点
op.setAttribute("value",""+sVal+i);//设置元素节点的属性
var tx = document.createTextNode(ds[sVal][i]);//创建文本节点
op.appendChild(tx);//把文本节点放在元素节点中
shi.appendChild(op);//把元素节点放在select对象中
}
}

function _xian (obj) {
var sVal = obj.value;//得到市的编码值
//得到市的select对象
var x = document.getElementsByTagName("select")[2];
x.innerText = "";//?偷懒

var sheng = Math.round(sVal/10,0);
var shi = sVal%10;
//通过省的编码，得到市的一维数组，在循环一维数组

for(var i =0;i<xian[sheng][shi].length;i++){

var op = document.createElement("option");//创建元素节点

op.setAttribute("value",""+sVal+i);//设置元素节点的属性
var tx = document.createTextNode(xian[sheng][shi][i]);//创建文本节点
op.appendChild(tx);//把文本节点放在元素节点中
x.appendChild(op);//把元素节点放在select对象中
}
}
</script>