求DOM三级联动菜单思路

按照老师的视频，知道了怎么去写二级联动菜单。
我想在二级菜单的基础上加个三级菜单。例如省-市-县。
我想在开始选择省的时候，后面的市就有默认的，区或者县也有默认的。
写的时候发现似乎要定义N个数组。我只拿了几个省市做例子。
是不是还得在城市下拉菜单那再加一个事件，那又怎么保证选择省的时候，二级的市和三级的区/县都有默认呢？？？
求思路？？？？？
下面是根据老师的视频写的二级联动菜单。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
select{
width:100px;
}
</style>
<script type="text/javascript">
function selcity()
{
/*
定义数据对应关系
城市有很多，所以通过数组存储，每一个省对应一个城市数组，怎么建立对应关系呢？
每一个省都有自己的角标。通过角标和数组建立对应关系，这就是二维数组。
*/
var arr=[['--选择城市--'],
['海淀区','朝阳区','东城区','西城区'],
['长沙市','湘潭市','娄底市','怀化市'],
['沈阳市','大连市','鞍山市','抚顺市'],
['济南市','青岛市','廊坊市','济宁市'],
['石家庄市','保定市','唐山市','邯郸市']];
//获取选择的省的角标
var selNode=document.getElementById("selid");
var index=selNode.selectedIndex;
var cities=arr[index];
var subselNode=document.getElementById("subselid");
//清除上一次选择的子菜单内容。
/*
for(var x=0;x<subselNode.options.length;)
{
subselNode.removeChild(subselNode.options[x]);
}
*/
//有更简单的清除方式，只要改变下拉菜单的长度即可。
subselNode.options.length=0;
for(var x=0;x<cities.length;x++)
{
var optNode=document.createElement("option");
optNode.innerHTML=cities[x];
subselNode.appendChild(optNode);
}
}
</script>
</head>
<body>
<select id="selid" onchange="selcity()">
<option>--选择省市--</option>
<option>北京市</option>
<option>湖南省</option>
<option>辽宁省</option>
<option>山东省</option>
<option>河北省</option>
</select>
<select id="subselid">
<option>--选择城市--</option>
</select>
</body>
</html>

复制代码

帐号		自动登录	找回密码
密码			加入黑马

求DOM三级联动菜单思路

1 个回复