js实现两个下拉框联动

JavaScript023

js实现两个下拉框联动,第1张

基本方式有以下两种：方式1：给出菜单1的菜单数据，当点击某个菜单项后，把该项的值传给服务端，由服务端返回新的菜单数据到菜单2.方式2：菜单数据静态存储在js或者html元素中，当点击某个菜单项后，直接把相应的菜单数据到菜单2. 源代码你可以在百度搜索 "js下拉菜单 联动" 得到。

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

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

<HTML>

<HEAD>

<TITLE>New Document </TITLE>

<script>

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

}

}

//这里就是取当前被选中的下拉框的值。

function showInfo(){

var sltProvince=document.getElementById("province")

var sltCity=document.getElementById("city")

for(var i=0i<sltCity.lengthi++){

if(sltCity.options[i].selected)

document.getElementById("cityValue").innerHTML=sltCity.options[i].value

}

for(var i=0i<sltProvince.lengthi++){

if(sltProvince.options[i].selected)

document.getElementById("pro").innerHTML=sltProvince.options[i].value

}

}

</script>

</head>

<BODY>

<form action="somepage.asp" name=theForm">

<select name="province" id="province" onchange="getCity()">

<option value="0" selected>请选择所在省份</option>

<option value="直辖市">直辖市</option>

</select>

<select id="city" name="city">

<option value="0">请选择所在城市</option>

</select>

<input type="button" onclick="showInfo()"/>

</form>

<div id="showvalue">

省份：<span id="pro"> </span>  城市 ： <span id="cityValue"> </span>

</div>

</BODY>

</HTML>

自己写的。测试了。看看是不是你想要的结果。