rainyzz's blog

使用js实现两级联动下拉菜单

第二个select的内容是跟随第一个select变动的,刚开始先把第二个select的内容设置成第一个select对应的内容,然后使用一个二维数组array,存储对应的第二个select中的选项内容,使用变量对select对象的option对象进行删除添加。

代码如下:

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
29
30
31
32
<!DOCTYPETYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<META http-equiv="Content-Type" content="text/html; charset=UTF-8">
<html>
<head>
</head>
<body>
<script language="JavaScript" type="text/javascript">
var array= [["a1","a2"],["b1","b2","b3"],["c1","c2"]];
function getSecond(){
var vfirst=document.getElementById('first');
var vsecond=document.getElementById('second');
var num = vfirst.options.selectedIndex;
vsecond.options.length = 0;
for(var i=0;i<array[num].length;i++){
vsecond.options[i]=new Option(array[num][i],array[num][i]);
}
}
</script>
<form method="post" name="form1">
<select name="first" id="first" onChange="getSecond()">
<option value="1">a</option>
<option value="2">b</option>
<option value="3">c</option>
</select>
<select name="second" id="second">
<option value="1">a1</option>
<option value="2">a2</option>
</select>
</form>
</body>
</html>