<html>
<head>
<title>New Document </title>
<script language="JavaScript" type="text/javascript">
var city=[
["北京","天津","上海","重庆"],
["南京","苏州","南通","常州"],
["福州","福安","龙岩","南平"],
["广州","潮阳","潮州","澄海"],
["兰州","白银","定西","敦煌"]
]
function getCity(){
var sltProvince=document.getElementById("province")
var sltCity=document.getElementById("city")
var provinceCity=city[sltProvince.selectedIndex-1]
sltCity.length=1
for(var i=0i<provinceCity.lengthi++){
sltCity[i+1]=new Option(provinceCity[i],provinceCity[i])
}
}
</script>
</head>
<body>
<form action="somepage.asp" name=theForm">
<select name="province" id="province" onchange="getCity()">
<option value="0">请选择所在省份</option>
<option value="直辖市">直辖市</option>
<option value="江苏省">江苏省</option>
<option value="福建省">福建省</option>
<option value="广东省">广东省</option>
<option value="甘肃省">甘肃省</option>
</select>
<select id="city" name="city">
<option value="0">请选择所在城市</option>
</select>
</form>
</body>
</html>
jsp设置二级联动的下拉列表的例子如下：
<html><head>
<title>This is a test!</title>
</head>
<body>
<form name="frm">
<select name="s1" onChange="redirec(document.frm.s1.options.selectedIndex)">
<option selected>请选择</option>
<option value="1">脚本语言</option>
<option value="2">高级语言</option>
<option value="3">其他语言</option>//下拉列表数据
</select>
<select name="s2">
<option value="请选择" selected>请选择</option>
</select>
</form>
<script language="javascript">
//获取一级菜单长度
var select1_len = document.frm.s1.options.length
var select2 = new Array(select1_len)
//把一级菜单都设为数组
for (i=0 i<select1_len i++)
{ select2[i] = new Array()}
//定义基本选项
select2[0][0] = new Option("请选择", " ")
select2[1][0] = new Option("PHP", " ")
select2[1][1] = new Option("ASP", " ")
select2[1][2] = new Option("JSP", " ")
select2[2][0] = new Option("C/C++", " ")
select2[2][1] = new Option("Java", " ")
select2[2][2] = new Option("C#", " ")
select2[3][0] = new Option("Perl", " ")
select2[3][1] = new Option("Ruby", " ")
select2[3][2] = new Option("Python", " ")
//联动函数
function redirec(x)
{
var temp = document.frm.s2
for (i=0i<select2[x].lengthi++)
{ temp.options[i]=new Option(select2[x][i].text,select2[x][i].value)}
temp.options[0].selected=true
}
</script>
</body>
</html>
