html+javascript三(多)级联动

如果不去触发2的话，那2后面有的全都追加到3后面了，除非你特指2当中的某一个，可这可能失去了级联的功效，（例子中是加了一个全局变量（sign）阻止了2后面有子结点(例子中只追加了441的)全都加到3后面）
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<meta http-equiv="content-type" content="text/html" charset="utf-8">
<link rel="stylesheet" type="text/css" href="">
<script type="text/javascript" src=""></script>
<script language="javascript" type="text/javascript"></script>
<script language = "JavaScript">
var sign = 0;
var onecount;
onecount=0;
subcat = new Array();
subcat[0] = new Array("海尔","0","434");
subcat[1] = new Array("波创","0","435");
subcat[2] = new Array("索博","0","436");
subcat[3] = new Array("瑞朗","0","437");
subcat[4] = new Array("安居宝","0","438");
subcat[5] = new Array("雨读","0","439");
subcat[6] = new Array("三本","0","440");
subcat[7] = new Array("灯光窗帘","434","441");
subcat[8] = new Array("环境检测","434","442");
subcat[9] = new Array("家庭安防","434","443");
subcat[10] = new Array("家庭网关","434","444");
subcat[11] = new Array("可视对讲","434","445");
subcat[12] = new Array("媒体娱乐","434","446");
subcat[13] = new Array("网络家电","434","447");
subcat[14] = new Array("网络冰箱","447","448");
subcat[15] = new Array("网络空调","447","449");
subcat[16] = new Array("网络热水器","447","450");
subcat[17] = new Array("网络微波炉","447","451");
subcat[18] = new Array("网络吸油烟机","447","452");
subcat[19] = new Array("网络洗碗机","447","453");
subcat[20] = new Array("网络洗衣机","447","454");
subcat[21] = new Array("智能开关","435","457");
subcat[22] = new Array("智能插座","435","458");
subcat[23] = new Array("远程控制","435","459");
subcat[24] = new Array("智能遥控","435","460");
subcat[25] = new Array("智能模块","435","461");
subcat[26] = new Array("智能网关","435","462");
subcat[27] = new Array("安防","436","463");
subcat[28] = new Array("窗帘控制","436","464");
subcat[29] = new Array("电脑控制","436","465");
subcat[30] = new Array("定时控制","436","466");
subcat[31] = new Array("概念产品","436","467");
subcat[32] = new Array("家庭娱乐","436","468");
subcat[33] = new Array("接收模块","436","469");
subcat[34] = new Array("净化电力线","436","470");
subcat[35] = new Array("墙上开关","436","471");
subcat[36] = new Array("墙上控制","436","472");
subcat[37] = new Array("随意插接收","436","473");
subcat[38] = new Array("随意插控制","436","474");
subcat[39] = new Array("无线","436","475");
subcat[40] = new Array("远程控制","436","476");
subcat[41] = new Array("载波信号分析","436","477");
subcat[42] = new Array("安防报警","437","478");
subcat[43] = new Array("宠物喂食","437","479");
subcat[44] = new Array("电动窗帘","437","480");
subcat[45] = new Array("电器控制","437","481");
subcat[46] = new Array("家居布线","437","482");
subcat[47] = new Array("系统保障","437","483");
subcat[48] = new Array("智能控制","437","484");
subcat[49] = new Array("智能照明","437","485");
subcat[50] = new Array("主机","438","486");
subcat[51] = new Array("停车场","438","487");
subcat[52] = new Array("管理机","438","488");
subcat[53] = new Array("分机","438","489");
subcat[54] = new Array("其他","438","490");
subcat[55] = new Array("中央音响","439","491");
subcat[56] = new Array("智能弱电箱","439","492");
subcat[57] = new Array("智能AV","439","493");
subcat[58] = new Array("音视频面板","439","494");
subcat[59] = new Array("灵慧眼","439","495");
subcat[60] = new Array("多媒体点播中心","439","496");
subcat[61] = new Array("智能遥控窗门窗帘","440","497");
subcat[62] = new Array("单窗门单窗帘","440","498");
subcat[63] = new Array("双窗门双窗帘","440","500");
subcat[64] = new Array("灯光窗帘31level","441","501");
subcat[65] = new Array("灯光窗帘32level","441","502");
subcat[66] = new Array("灯光窗帘33level","441","503");
onecount=67;
function changelocation(locationid,Category_Search)
{
//alert('这里是什么'+Category_Search);
strobj=eval(document.getElementById(Category_Search));
strobj3 = document.getElementById('Category_Search_3');
strobj.length = 0;
var locationid=locationid;
var i;
for (i=0;i < onecount; i++)
{
if (subcat[i][1] == locationid)
{
strobj.options[strobj.length] = new Option(subcat[i][0], subcat[i][2]);

if (sign != 1)
{
for (j=0;j < onecount; j++)
{
if (subcat[j][1] == subcat[i][2])
{
strobj3.options[strobj3.length] = new Option(subcat[j][0], subcat[j][2]);
}
sign = 1;
}
}
}
}
}
</script>
</HEAD><BODY>
<table width="200" cellspacing="0" cellpadding="0" align="center" style="border:1px solid #666666">
<form action="Product_List.asp" method="get" name="form1">
<tr>
<td height="56"><div align="center">
<table width="200" border="0" cellspacing="1" bgcolor="#CCCCCC">
<tr bgcolor="#FFFFFF">
<td width="189" nowrap="nowrap">产品品牌:
<select name="Category_Search_1" id="Category_Search_1" onChange="changelocation(this.options[this.selectedIndex].value,'Category_Search_2')" style="width:100px">
<option>-请选择-</option>
<option value="434" >海尔</option>
<option value="435" >波创</option>
<option value="436" >索博</option>
<option value="437" >瑞朗</option>
<option value="438" >安居宝</option>
<option value="439" >雨读</option>
<option value="440" >三本</option>
</select>
</td>
</tr>
<tr bgcolor="#FFFFFF">
<td nowrap="nowrap">产品系统:
<select name="Category_Search_2" id="Category_Search_2" onChange="changelocation(this.options[this.selectedIndex].value,'Category_Search_3')" style="width:100px">
<option>-请选择-</option>
</select>
</td>
</tr>
<tr bgcolor="#FFFFFF">
<td nowrap="nowrap">产品类别:
<select name="Category_Search_3" id="Category_Search_3" style="width:100px">
</select></td>
</tr>
</table>
</div></td>
</tr>
</form>
</table>
</BODY>
</HTML>

<SCRIPT LANGUAGE="JavaScript">
");
document.writeln("<\/script>");
document.writeln("<s"+"cript language=\"JavaScript\">");
document.writeln("");
document.writeln("<\/script>");
}
//-->
</script>

<SCRIPT LANGUAGE="JavaScript">

</SCRIPT>
<FORM name="Form1">
<SCRIPT LANGUAGE="JavaScript">
CreateSelect("","S_13|S_23|S_33","","请选择地区@|请选择省份@|请选择城市@",AllStr1,0);
</SCRIPT>
</FORM>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>小灰</title>
</head><body><form name="form1" method="post">
<select id="s1" name="s1"></select><select id="s2" name="s2"></select><select id="s3" name="s3"></select><select id="s4" name="s4"></select>
</form>
<script language="JavaScript">

</script></body>
</html>

这是个例子，你可以参考下：
<FORM name="isc">
<table border="0" cellspacing="0" cellpadding="0">
  <tr align="center">
    <td nowrap height="11">  <select name="example" size="1" onChange="redirect(this.options.selectedIndex)">
<option selected>---Select1-------------</option>
<option>Webmaster Sites</option>
<option>News Sites</option>
</select><select name="stage2" size="1" onChange="redirect1(this.options.selectedIndex)">
<option value=" " selected> </option>
<option value=" " selected>---Select2--------------</option>
<option value=" " selected>---Select2--------------</option>
</select><select name="stage3" size="1" onChange="redirect2(this.options.selectedIndex)">
<option value=" " selected> </option>
<option value=" " selected>---Select3----------------</option>
<option value=" " selected>---Select3----------------</option>
</select><script>

</script> </td>
  </tr>
</table>
</FORM><p><font face="arial" size="-2">This free script provided by</font><br>
<font face="arial, helvetica" size="-2"><a href="http://wsabstract.com">Website
Abstraction</a></font></p>

调试易

html+javascript三(多)级联动

解决方案 »