JS特效之联菜单

发表于 | 分类于 |
字数统计: 344 | 阅读时长 ≈ 1

要做一个动态的联结菜单，首先需要分析期望得到什么样的效果
1.联结菜单在网页注册的时候，比较常用。
2.第一个点击的省份不同，将会触发不同的城市选项
在开始写代码之前，我们需要知道以下知识点
1.选择select时，如何触发？哪种事件？
2.如何获取被选中的option的值？
3.如何动态生成option?
即熟悉使用DOM+事件

举一个例子，有2个下拉框，第一个下拉框用来选择省份，第二个用来选择城市
要求：省份不同，将触发不同的城市选项 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<title>联结菜单</title>
<script>
var area = [['朝阳','海淀','门洞'],['西安','商洛','渭南']];//巧用value值来定义一个二维数组
function act(){
	var sel = document.getElementById('pro');
	var opt='';
    if(sel.value==-1){//默认状态时，城市框为空
        document.getElementById('city').innerHTML=opt;
        return;
    }
	for(var i=0,len=area[sel.value].length;i<len;i++){//
		opt = opt+'<option value="'+i+'">'+area[sel.value][i]+'</option>';
		}
	document.getElementById('city').innerHTML=opt;
}
</script>	
	
</head>

<body>
<select name="" id="pro" onchange="act();">
<option value="-1">请选择</option>
<option value="0">北京</option>
<option value="1">陕西</option>
</select>
<select name="" id="city">
</select>
</body>