展开全部
把下拉框的数据全部读出，并存放在JS的Array中。
当选择下拉框的时候触发onChange()事件动态的添加或改变级联
下拉框的内容。
<html>
<script language="javascript">
var areaArray = new Array();
areaArray[areaArray.length]=new Array("1","杭州");
areaArray[areaArray.length]=new Array("2","湖州");
areaArray[areaArray.length]=new Array("3","温州");
var townArray = new Array();
townArray[townArray.length]=new Array("1","1","上城区");
townArray[townArray.length]=new Array("1","2","下城区");
townArray[townArray.length]=new Array("2","3","南浔镇");
townArray[townArray.length]=new Array("2","4","菱湖镇");
townArray[townArray.length]=new Array("3","5","乐清");
townArray[townArray.length]=new Array("3","6","苍南");
function setTown(obj1ID,obj2ID){
var objArea = document.getElementById(obj1ID);
var objTown = document.getElementById(obj2ID);
var i;
var itemArray = null;
if(objArea.value.length > 0){
itemArray = new Array();
for(i=0;i<townArray.length;i++){
if(townArray[i][0]==objArea.value){
itemArray[itemArray.length]=new
Array(townArray[i][1],townArray[i][2]);
}
}
}
for(i = objTown.options.length ; i >= 0 ; i--){
objTown.options[i] = null;
}
objTown.options[0] = new Option("请选地区");
objTown.options[0].value = "";
if(itemArray != null){
for(i = 0 ; i < itemArray.length; i++){
objTown.options[i+1] = new
Option(itemArray[i][1]);
if(itemArray[i][0] != null){
objTown.options[i].value = itemArray[i][0];
}
}
}
}
</script>
<body>
<table width="99%" border="0" align="center" style="border-bottom:1px
solid #cccccc">
<tr>
<td width="10"><select name="areaid" id="areaid"
onChange="setTown('areaid','townid')">
<option value="">请选市县</option>
<option value="1">杭州</option>
<option value="2">湖州</option>
<option value="3">温州</option>
</select>
</td>
<td width="10"><select name="townid" id="townid">
<option value="">请选地区</option>
</select>
</td>
</tr>
</table>
</body>
</html>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<style>
body,select
{
font-size:9pt;
font-family:Verdana;
}
a
{
color:red;
text-decoration:none;
}
a:hover{
text-decoration:underline;
}
</style>
<SCRIPT LANGUAGE="JavaScript">
<!--
function Dsy()
{
this.Items = {};
}
Dsy.prototype.add = function(id,iArray)
{
this.Items[id] = iArray;
}
Dsy.prototype.Exists = function(id)
{
if(typeof(this.Items[id]) == "undefined") return false;
return true;
}
function change(v){
var str="0";
for(i=0;i<v;i++){ str+=("_"+(document.getElementById(s[i]).selectedIndex-1));};
var ss=document.getElementById(s[v]);
with(ss){
length = 0;
options[0]=new Option(opt0[v],opt0[v]);
if(v && document.getElementById(s[v-1]).selectedIndex>0 || !v)
{
if(dsy.Exists(str)){
ar = dsy.Items[str];
for(i=0;i<ar.length;i++)options[length]=new Option(ar[i],ar[i]);
if(v)options[1].selected = true;
}
}
if(++v<s.length){change(v);}
}
}
var dsy = new Dsy();
dsy.add("0",["1","2","3"]);
dsy.add("0_0",["11","12","13"]);
dsy.add("0_1",["21","22","23"]);
dsy.add("0_2",["31","32","33"]);
//-->
</SCRIPT>
<SCRIPT LANGUAGE = JavaScript>
var s=["s1","s2"];
var opt0 = ["请选择","请选择"];
function setup()
{
for(i=0;i<s.length-1;i++)
document.getElementById(s[i]).onchange=new Function("change("+(i+1)+")");
change(0);
}
//-->
</SCRIPT>
</head>
<body bgcolor="#E0E0E0" onload="setup()">
<form name="frm">
<select id="s1"><option></option></select>
<select id="s2"><option></option></select>
</form>
</body>
</html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<style>
body,select
{
font-size:9pt;
font-family:Verdana;
}
a
{
color:red;
text-decoration:none;
}
a:hover{
text-decoration:underline;
}
</style>
<SCRIPT LANGUAGE="JavaScript">
<!--
function Dsy()
{
this.Items = {};
}
Dsy.prototype.add = function(id,iArray)
{
this.Items[id] = iArray;
}
Dsy.prototype.Exists = function(id)
{
if(typeof(this.Items[id]) == "undefined") return false;
return true;
}
function change(v){
var str="0";
for(i=0;i<v;i++){ str+=("_"+(document.getElementById(s[i]).selectedIndex-1));};
var ss=document.getElementById(s[v]);
with(ss){
length = 0;
options[0]=new Option(opt0[v],opt0[v]);
if(v && document.getElementById(s[v-1]).selectedIndex>0 || !v)
{
if(dsy.Exists(str)){
ar = dsy.Items[str];
for(i=0;i<ar.length;i++)options[length]=new Option(ar[i],ar[i]);
if(v)options[1].selected = true;
}
}
if(++v<s.length){change(v);}
}
}
var dsy = new Dsy();
dsy.add("0",["1","2","3"]);
dsy.add("0_0",["11","12","13"]);
dsy.add("0_1",["21","22","23"]);
dsy.add("0_2",["31","32","33"]);
//-->
</SCRIPT>
<SCRIPT LANGUAGE = JavaScript>
var s=["s1","s2"];
var opt0 = ["请选择","请选择"];
function setup()
{
for(i=0;i<s.length-1;i++)
document.getElementById(s[i]).onchange=new Function("change("+(i+1)+")");
change(0);
}
//-->
</SCRIPT>
</head>
<body bgcolor="#E0E0E0" onload="setup()">
<form name="frm">
<select id="s1"><option></option></select>
<select id="s2"><option></option></select>
</form>
</body>
</html>
本回答被网友采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
需要自己简单的改下，你可以直接预览先，
<HTML>
<HEAD>
<META http-equiv='Content-Type' content='text/html; charset=gb2312'>
<TITLE>关联菜单(选中洲名列出相关信息)</TITLE>
<SCRIPT LANGUAGE="JavaScript">
<!-- Begin
var state = new Array(50);
var capital = new Array(50);
var date = new Array(50);
var flower = new Array(50);
var bird = new Array(50);
state[0] = "资料1";
capital[0] = "AAAA";
date[0] = "December 14, 1819";
flower[0] = "Camellia";
bird[0] = "Yellowhammer";
state[1] = "资料2";
capital[1] = "BBBB";
date[1] = "January 3, 1959";
flower[1] = "Forget-me-not";
bird[1] = "Willow Ptarmigan";
state[2] = "资料3";
capital[2] = "CCCC";
date[2] = "February 14, 1912";
flower[2] = "Suguaro Cactus Blossom";
bird[2] = "Cactus Wren";
function showInfo() {
var page = document.triviaform;
var choice = page.statesList;
for (var i = 0; i <= state.length; i++) {
if (choice.options[choice.selectedIndex].value == state[i]) {
page.capital.value = capital[i];
page.date.value = date[i];
page.flower.value = flower[i];
page.bird.value = bird[i];
break;
}
else {
page.capital.value = "";
page.date.value = "";
page.flower.value = "";
page.bird.value = "";
}
}
}
// End -->
</script>
</HEAD>
<BODY >
<center>
<form name=triviaform>
<table border=1>
<tr><td align=center>
<p><font size=6><em><strong><u><font size="2">这个实例只是提供给你一种思路而已</font></u></strong></em></font>
<p>（故未做汉化）<br>
<font size=3></font>
<p>Select a state: <select name=statesList size=1 onChange="showInfo()">
<option value="">Select ---->
<option value="资料1">资料1
<option value="资料2">资料2
<option value="资料3">资料3
</select>
<p>Capital: <input type=text size=25 name=capital>
<p>Admitted On: <input type=text size=20 name=date>
<p>State Flower: <input type=text size=20 name=flower>
<p>State Bird: <input type=text size=23 name=bird>
</td></tr>
</table>
</form>
</center>
</BODY></HTML>
<HTML>
<HEAD>
<META http-equiv='Content-Type' content='text/html; charset=gb2312'>
<TITLE>关联菜单(选中洲名列出相关信息)</TITLE>
<SCRIPT LANGUAGE="JavaScript">
<!-- Begin
var state = new Array(50);
var capital = new Array(50);
var date = new Array(50);
var flower = new Array(50);
var bird = new Array(50);
state[0] = "资料1";
capital[0] = "AAAA";
date[0] = "December 14, 1819";
flower[0] = "Camellia";
bird[0] = "Yellowhammer";
state[1] = "资料2";
capital[1] = "BBBB";
date[1] = "January 3, 1959";
flower[1] = "Forget-me-not";
bird[1] = "Willow Ptarmigan";
state[2] = "资料3";
capital[2] = "CCCC";
date[2] = "February 14, 1912";
flower[2] = "Suguaro Cactus Blossom";
bird[2] = "Cactus Wren";
function showInfo() {
var page = document.triviaform;
var choice = page.statesList;
for (var i = 0; i <= state.length; i++) {
if (choice.options[choice.selectedIndex].value == state[i]) {
page.capital.value = capital[i];
page.date.value = date[i];
page.flower.value = flower[i];
page.bird.value = bird[i];
break;
}
else {
page.capital.value = "";
page.date.value = "";
page.flower.value = "";
page.bird.value = "";
}
}
}
// End -->
</script>
</HEAD>
<BODY >
<center>
<form name=triviaform>
<table border=1>
<tr><td align=center>
<p><font size=6><em><strong><u><font size="2">这个实例只是提供给你一种思路而已</font></u></strong></em></font>
<p>（故未做汉化）<br>
<font size=3></font>
<p>Select a state: <select name=statesList size=1 onChange="showInfo()">
<option value="">Select ---->
<option value="资料1">资料1
<option value="资料2">资料2
<option value="资料3">资料3
</select>
<p>Capital: <input type=text size=25 name=capital>
<p>Admitted On: <input type=text size=20 name=date>
<p>State Flower: <input type=text size=20 name=flower>
<p>State Bird: <input type=text size=23 name=bird>
</td></tr>
</table>
</form>
</center>
</BODY></HTML>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
更多回答（1）
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
