js二级联动下拉列表菜单

JavaScript06

js二级联动下拉列表菜单,第1张

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<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>