<!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>
<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>