二级联动
<head>
<script type="text/javascript">
function demo(){
var arr=[
["选择城市"],
["海定区","朝阳区","丰台区","通州区"],
["浦东区","闸北区","上海滩"],
["郑州市","开封市","洛阳市","平顶山市","新乡市"]
];
//获取两个下拉框
var s1Node=document.getElementById("s1Node");
var s2Node=document.getElementById("s2Node");
//获取第一个下拉框选择的位置
var index=s1Node.selectedIndex;
//根据选择的位置,去容器中查找对应的内容
var list=arr[index];
//完成清除动作
s2Node.length=1;
//遍历容器
for(var x=0;x<list.length;x++){
//建立option选项
var opNode=document.createElement("option");
opNode.innerHTML=list[x];
//把创建的option添加到下拉框2中
s2Node.appendChild(opNode);
}
}
</script>
</head>
<body>
<select onchange="demo();" id="s1Node">
<option>选择省市</option>
<option>北京市</option>
<option>上海市</option>
<option>河南省</option>
</select>
<select id="s2Node">
<option>选择城市</option>
</select>
</body>
三级联动
<head>
<script type="text/javascript">
function demo(){
var arr=[
["选择城市"],
["海定区","朝阳区","丰台区","通州区"],
["浦东区","闸北区","上海滩"],
["郑州市","开封市","洛阳市","平顶山市","新乡市"]
];
//获取两个下拉框
var s1Node=document.getElementById("s1Node");
var s2Node=document.getElementById("s2Node");
//获取第一个下拉框选择的位置
var index=s1Node.selectedIndex;
//根据选择的位置,去容器中查找对应的内容
var list=arr[index];
//完成清除动作
s2Node.length=1;
//遍历容器
for(var x=0;x<list.length;x++){
//建立option选项
var opNode=document.createElement("option");
opNode.innerHTML=list[x];
//把创建的option添加到下拉框2中
s2Node.appendChild(opNode);
}
}
function demo2(){
var array1=[
['选择县区'],
['海淀一区','海淀二区','海淀三区'],
['朝阳一区','朝阳二区','朝阳三区','朝阳四区'],
['丰台一区','丰台二区'],
['通州一区'],
];
var array2=[
['选择县区'],
['浦东新区','浦东老区','浦东二区'],
['闸北一区','闸北二区'],
['上海滩一区']
];
//获取三个下拉框
var s1Node=document.getElementById("s1Node");
var s2Node=document.getElementById("s2Node");
var s3Node=document.getElementById("s3Node");
//获取下拉框1和下拉框2选择的位置
var index1=s1Node.selectedIndex;
var index2=s2Node.selectedIndex;
s3Node.length=1;
//判断你选择的是哪个城市
if(index1==1){
//去array1中查找对应的内容
var tt=array1[index2];
//遍历容器
for (var x=0;x<tt.length ;x++ )
{
var opNode=document.createElement("option");
opNode.innerHTML=tt[x];
s3Node.appendChild(opNode);
}
}
else if(index1==2){
//去array2中查找对应的内容
var tt=array2[index2];
//遍历容器
for (var x=0;x<tt.length ;x++ )
{
var opNode=document.createElement("option");
opNode.innerHTML=tt[x];
s3Node.appendChild(opNode);
}
}
}
</script>
</head>
<body>
<select onchange="demo();" id="s1Node">
<option>选择省市</option>
<option>北京市</option>
<option>上海市</option>
<option>河南省</option>
</select>
<select onchange="demo2();" id="s2Node">
<option>选择城市</option>
</select>
<select id="s3Node">
<option>选择县区</option>
</select>
</body>