级联菜单问题 - 编程论坛

#2

青春无限2013-02-04 19:38

ding…dd

#3

不玩虚的2013-02-18 10:38

同学习共进步

#4

xdsnet2013-02-28 11:54

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<script type="text/javascript" src="docTool.js"></script> 
<script type="text/javascript">
function selCity()
{
    var arr =[['--选择城市--'],    // 定义了一个2维数组，其第1维和具体的省级行政单位定义的维度一致形成一一对应关系
               ["海淀区","朝阳区","东城区","西城区"],
               ["沈阳","大连","鞍山","抚顺"],
               ["济南","青岛","烟台","威海"],
               ["洛阳","郑州","开封","南阳"]];
    var index = byId("selid").selectedIndex;//selectedIndex? 获取selid对象的selectedIndex属性，selid是在下面利用html定义的select对象，其selectedIndex属性表示当前那个选项被选中，selectedIndex是非负整数
    var subselNode = byId("subselid"); //获取subselid对象（为下一步进行控制做准备）
    var citys = arr[index];//? 通过前述省级单位选择项的选择找到对应的城市/区定义数组
    subselNode.options.length = 0; //清除subselid对象已有子项
    /*for(var x=0 ; x<subselNode.options.length;)
    {
        subselNode.removeChild(subselNode.options[x]);
    }*/
    for(var x=0;x<citys.length;x++) //根据获取的城市/区数组信息填充新的subselid对象子项
    {
        var optNode = doc.createElement("option");//? 创建一个option类型的对象，option类型对象才可以作为select类型对象的子项，subselid对象是select类型对象
        optNode.innerText = citys[x];//? 填入option类型对象的显示字符，相当于输出 <option>citys[x]</option>
        subselNode.appendChild(optNode);//appendChild 是一个dom中的标准功能，支持添加子项的dom对象都有该功能，这里相当于实现<select id="selid"><option>citys[x]</option>...</select>
    }
}
</script>
</head>

<body>
<select id="selid" onchange="selCity()">
<option>--选择城市--</option>
<option>北京</option>
<option>辽宁</option>
<option>山东</option>
<option>河南</option>
</select>
<select id="subselid">
<option>--选择城市--</option>
</select>
</body>
</html>