JS制作简单的三级联动
用javascript制作的一个简单三级联动，非常简单实用
<!DOCTYPEhtml>
<html>
<head>
<metacharset="utf-8">
<title></title>
</head>
<body>
省：
<selectstyle="width:100px;"id="pre"onchange="chg(this);">
<optionvalue="-1">请选择</option>
</select>
市：
<selectstyle="width:100px;"id="city"onchange="chg2(this)";></select>
区：
<selectstyle="width:100px;"id="area"></select>
</body>
<script>
//声明省
varpres=["北京","上海","山东"];//直接声明Array
//声明市
varcities=[
["东城","昌平","海淀"],
["浦东","高区"],
["济南","青岛"]
];
varareas=[
[
["东城1","东城2","东城3"],
["昌平1","昌平2","昌平3"],
["海淀1","海淀2","海淀3"]
],
[
["浦东1","浦东2","浦东3"],
["高区1","高区2","高区3"]
],
[
["济南1","济南2"],
["青岛1","青岛2"]
]
]
//设置一个省的公共下标
varpIndex=-1;
varpreEle=document.getElementById("pre");
varcityEle=document.getElementById("city");
varareaEle=document.getElementById("area");
//先设置省的值
for(vari=0;i<pres.length;i++){
//声明option.<optionvalue="pres[i]">Pres[i]</option>
varop=newOption(pres[i],i);
//添加
preEle.options.add(op);
}
functionchg(obj){
if(obj.value==-1){
cityEle.options.length=0;
areaEle.options.length=0;
}
//获取值
varval=obj.value;
pIndex=obj.value;
//获取ctiry
varcs=cities[val];
//获取默认区
varas=areas[val][0];
//先清空市
cityEle.options.length=0;
areaEle.options.length=0;
for(vari=0;i<cs.length;i++){
varop=newOption(cs[i],i);
cityEle.options.add(op);
}
for(vari=0;i<as.length;i++){
varop=newOption(as[i],i);
areaEle.options.add(op);
}
}
functionchg2(obj){
varval=obj.selectedIndex;
varas=areas[pIndex][val];
areaEle.options.length=0;
for(vari=0;i<as.length;i++){
varop=newOption(as[i],i);
areaEle.options.add(op);
}
}
</script>
</html>
以上所述就是本文的全部内容了，希望大家能够喜欢。