<html>
<head>
<title>三级下拉联动超链接菜单</title>
<meta http-equiv=content-Type content="text/html;charset=gb2312">
<script src="1.js"></script>
</head>
<body>
<div align="center">
<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>品牌</option>
<option>宝马</option>
<option>奥迪</option>
<option>奔驰</option>
<option>丰田</option>
<option>本田</option>
<option>奇瑞</option>
<option>比亚迪</option>
</select>
<select name="stage2" size="1" onChange="redirect1(this.options.selectedIndex)">
<option value=" " selected></option>')
<option value=" " selected>◤车系◢</option>
</select>
<select name="stage3" size="1" onChange="redirect2(this.options.selectedIndex)">
<option value=" " selected></option>')
<option value=" " selected>◤车型◢</option>
</select></table>
</form></div> </body>
</html>
<head>
<title>三级下拉联动超链接菜单</title>
<meta http-equiv=content-Type content="text/html;charset=gb2312">
<script src="1.js"></script>
</head>
<body>
<div align="center">
<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>品牌</option>
<option>宝马</option>
<option>奥迪</option>
<option>奔驰</option>
<option>丰田</option>
<option>本田</option>
<option>奇瑞</option>
<option>比亚迪</option>
</select>
<select name="stage2" size="1" onChange="redirect1(this.options.selectedIndex)">
<option value=" " selected></option>')
<option value=" " selected>◤车系◢</option>
</select>
<select name="stage3" size="1" onChange="redirect2(this.options.selectedIndex)">
<option value=" " selected></option>')
<option value=" " selected>◤车型◢</option>
</select></table>
</form></div> </body>
</html>
<script language="JavaScript">
<!--
var groups=document.isc.example.options.length
var group=new Array(groups)
for (i=0; i<groups; i++)
group[i]=new Array()
group[0][0]=new Option("----车系----"," ");
group[1][0]=new Option("120i"," ");
group[1][1]=new Option("120i敞篷"," ");
group[1][2]=new Option("130i"," ");
group[1][3]=new Option("320i敞篷"," ");
group[1][4]=new Option("320i硬顶"," ");
group[1][5]=new Option("325i"," ");
group[2][0]=new Option("奥迪TTRS2.0T"," ");
group[2][1]=new Option("奥迪TTR2.0Tqu"," ");
group[2][2]=new Option("奥迪TTR2.0T"," ");
group[2][3]=new Option("奥迪TTCS2.0T?"," ");
var temp=document.isc.stage2
function redirect(x){
for (m=temp.options.length-1;m>0;m--)
temp.options[m]=null
for (i=0;i<group[x].length;i++){
temp.options[i]=new Option(group[x][i].text,group[x][i].value)
}
temp.options[0].selected=true
redirect1(0)
} var secondGroups=document.isc.stage2.options.length
var secondGroup=new Array(groups)
for (i=0; i<groups; i++) {
secondGroup[i]=new Array(group[i].length)
for (j=0; j<group[i].length; j++) {
secondGroup[i][j]=new Array() }}
secondGroup[0][0][0]=new Option("----车型----"," ");
secondGroup[1][0][0]=new Option("车型","");
secondGroup[1][0][1]=new Option("2013款","http://www.autohome.com.cn/");
secondGroup[1][1][0]=new Option("车型"," ");
secondGroup[1][1][1]=new Option("2011款","http://www.baidu.com/");
secondGroup[1][2][0]=new Option("车型"," ");
secondGroup[1][2][1]=new Option("2011款","../cgi/pagenew7.htm");
secondGroup[1][3][0]=new Option("车型"," ");
secondGroup[1][3][1]=new Option("2011款","../cgi/pagenew15.htm"); secondGroup[1][4][0]=new Option("车型"," ");
secondGroup[1][4][1]=new Option("2011款","../cgi/pagenew15.htm"); secondGroup[1][5][0]=new Option("车型"," ");
secondGroup[1][5][1]=new Option("2011款","../cgi/pagenew15.htm");
secondGroup[2][0][0]=new Option("车型"," ");
secondGroup[2][0][0]=new Option("2011款"," ");
secondGroup[2][1][0]=new Option("车型"," ");
secondGroup[2][1][1]=new Option("2011款","../pictures/cartoon/1.htm");
secondGroup[2][2][0]=new Option("车型"," ");
secondGroup[2][2][1]=new Option("2011款","../pictures/email/1.htm");
var temp1=document.isc.stage3
function redirect1(y){
for (m=temp1.options.length-1;m>0;m--)
temp1.options[m]=null
for (i=0;i<secondGroup[document.isc.example.options.selectedIndex][y].length;i++){
temp1.options[i]=new Option(secondGroup[document.isc.example.options.selectedIndex][y][i].text,secondGroup[document.isc.example.options.selectedIndex][y][i].value)
}
temp1.options[0].selected=true
}
function redirect2(){
window.open(temp1.value,"","toolbar=no,location=yes,directories=no,status=no,menubar=no,scrollbars=yes, resizable=yes,copyhistory=yes,width=700,height=450");
}
//-->
</script>// JavaScript Document
2.引用外部JS文件的代码要写到</body>标签前面,按你的写法,在head中引用js文件,js文件中直接操作下拉列表对象,但这时这些下拉列表还没有加载到DOM树中。
<html>
<head>
<title>三级下拉联动超链接菜单</title>
<meta http-equiv=content-Type content="text/html;charset=gb2312">
</head>
<body>
<div align="center">
<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>品牌</option>
<option>宝马</option>
<option>奥迪</option>
<option>奔驰</option>
<option>丰田</option>
<option>本田</option>
<option>奇瑞</option>
<option>比亚迪</option>
</select>
<select name="stage2" size="1" onChange="redirect1(this.options.selectedIndex)">
<option value=" " selected></option>
') <option value=" " selected>◤车系◢</option>
</select>
<select name="stage3" size="1" onChange="redirect2(this.options.selectedIndex)">
<option value=" " selected></option>
') <option value=" " selected>◤车型◢</option>
</select>
</table>
</form>
</div>
<script type="text/javascript">
<!--
var groups = document.isc.example.options.length
var group = new Array(groups)
for (i = 0; i < groups; i++)
group[i] = new Array();
group[0][0] = new Option("----车系----", " ");group[1][0] = new Option("120i", " ");
group[1][1] = new Option("120i敞篷", " ");
group[1][2] = new Option("130i", " ");
group[1][3] = new Option("320i敞篷", " ");
group[1][4] = new Option("320i硬顶", " ");
group[1][5] = new Option("325i", " ");group[2][0] = new Option("奥迪TTRS2.0T", " ");
group[2][1] = new Option("奥迪TTR2.0Tqu", " ");
group[2][2] = new Option("奥迪TTR2.0T", " ");
group[2][3] = new Option("奥迪TTCS2.0T?", " ");var temp = document.isc.stage2function redirect(x) {
for (m = temp.options.length - 1; m > 0; m--)
temp.options[m] = null
for (i = 0; i < group[x].length; i++) {
temp.options[i] = new Option(group[x][i].text, group[x][i].value)
}
temp.options[0].selected = true
redirect1(0)
}var secondGroups = document.isc.stage2.options.length
var secondGroup = new Array(groups)
for (i = 0; i < groups; i++) {
secondGroup[i] = new Array(group[i].length)
for (j = 0; j < group[i].length; j++) {
secondGroup[i][j] = new Array()
}
}secondGroup[0][0][0] = new Option("----车型----", " ");secondGroup[1][0][0] = new Option("车型", "");
secondGroup[1][0][1] = new Option("2013款", "http://www.autohome.com.cn/");secondGroup[1][1][0] = new Option("车型", " ");
secondGroup[1][1][1] = new Option("2011款", "http://www.baidu.com/");
secondGroup[1][2][0] = new Option("车型", " ");
secondGroup[1][2][1] = new Option("2011款", "../cgi/pagenew7.htm");
secondGroup[1][3][0] = new Option("车型", " ");
secondGroup[1][3][1] = new Option("2011款", "../cgi/pagenew15.htm");secondGroup[1][4][0] = new Option("车型", " ");
secondGroup[1][4][1] = new Option("2011款", "../cgi/pagenew15.htm");secondGroup[1][5][0] = new Option("车型", " ");
secondGroup[1][5][1] = new Option("2011款", "../cgi/pagenew15.htm");
secondGroup[2][0][0] = new Option("车型", " ");
secondGroup[2][0][0] = new Option("2011款", " ");secondGroup[2][1][0] = new Option("车型", " ");
secondGroup[2][1][1] = new Option("2011款", "../pictures/cartoon/1.htm");secondGroup[2][2][0] = new Option("车型", " ");
secondGroup[2][2][1] = new Option("2011款", "../pictures/email/1.htm");
var temp1 = document.isc.stage3function redirect1(y) {
for (m = temp1.options.length - 1; m > 0; m--)
temp1.options[m] = null
for (i = 0; i < secondGroup[document.isc.example.options.selectedIndex][y].length; i++) {
temp1.options[i] = new Option(secondGroup[document.isc.example.options.selectedIndex][y][i].text, secondGroup[document.isc.example.options.selectedIndex][y][i].value)
}
temp1.options[0].selected = true
}function redirect2() {
window.open(temp1.value, "", "toolbar=no,location=yes,directories=no,status=no,menubar=no,scrollbars=yes, resizable=yes,copyhistory=yes,width=700,height=450");
}
//-->
</script>
</body>
</html>
你把js代码保存为js文件就可以了,我写在一起是为了方便测试。
<html>
<head>
<title>三级下拉联动超链接菜单</title>
<meta http-equiv=content-Type content="text/html;charset=gb2312">
<script src="1.js"></script>
</head>
<body>
<div align="center">
<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>品牌</option>
<option>宝马</option>
<option>奥迪</option>
<option>奔驰</option>
<option>丰田</option>
<option>本田</option>
<option>奇瑞</option>
<option>比亚迪</option>
</select>
<select name="stage2" size="1" onChange="redirect1(this.options.selectedIndex)">
<option value=" " selected></option>')
<option value=" " selected>◤车系◢</option>
</select>
<select name="stage3" size="1" onChange="redirect2(this.options.selectedIndex)">
<option value=" " selected></option>')
<option value=" " selected>◤车型◢</option>
</select></table>
</form></div> </body>
</html>
<script language="JavaScript">
<!--
var groups=document.isc.example.options.length
var group=new Array(groups)
for (i=0; i<groups; i++)
group[i]=new Array()
group[0][0]=new Option("----车系----"," ");
group[1][0]=new Option("120i"," ");
group[1][1]=new Option("120i敞篷"," ");
group[1][2]=new Option("130i"," ");
group[1][3]=new Option("320i敞篷"," ");
group[1][4]=new Option("320i硬顶"," ");
group[1][5]=new Option("325i"," ");
group[2][0]=new Option("奥迪TTRS2.0T"," ");
group[2][1]=new Option("奥迪TTR2.0Tqu"," ");
group[2][2]=new Option("奥迪TTR2.0T"," ");
group[2][3]=new Option("奥迪TTCS2.0T?"," ");
var temp=document.isc.stage2
function redirect(x){
for (m=temp.options.length-1;m>0;m--)
temp.options[m]=null
for (i=0;i<group[x].length;i++){
temp.options[i]=new Option(group[x][i].text,group[x][i].value)
}
temp.options[0].selected=true
redirect1(0)
} var secondGroups=document.isc.stage2.options.length
var secondGroup=new Array(groups)
for (i=0; i<groups; i++) {
secondGroup[i]=new Array(group[i].length)
for (j=0; j<group[i].length; j++) {
secondGroup[i][j]=new Array() }}
secondGroup[0][0][0]=new Option("----车型----"," ");
secondGroup[1][0][0]=new Option("车型","");
secondGroup[1][0][1]=new Option("2013款","http://www.autohome.com.cn/");
secondGroup[1][1][0]=new Option("车型"," ");
secondGroup[1][1][1]=new Option("2011款","http://www.baidu.com/");
secondGroup[1][2][0]=new Option("车型"," ");
secondGroup[1][2][1]=new Option("2011款","../cgi/pagenew7.htm");
secondGroup[1][3][0]=new Option("车型"," ");
secondGroup[1][3][1]=new Option("2011款","../cgi/pagenew15.htm"); secondGroup[1][4][0]=new Option("车型"," ");
secondGroup[1][4][1]=new Option("2011款","../cgi/pagenew15.htm"); secondGroup[1][5][0]=new Option("车型"," ");
secondGroup[1][5][1]=new Option("2011款","../cgi/pagenew15.htm");
secondGroup[2][0][0]=new Option("车型"," ");
secondGroup[2][0][0]=new Option("2011款"," ");
secondGroup[2][1][0]=new Option("车型"," ");
secondGroup[2][1][1]=new Option("2011款","../pictures/cartoon/1.htm");
secondGroup[2][2][0]=new Option("车型"," ");
secondGroup[2][2][1]=new Option("2011款","../pictures/email/1.htm");
var temp1=document.isc.stage3
function redirect1(y){
for (m=temp1.options.length-1;m>0;m--)
temp1.options[m]=null
for (i=0;i<secondGroup[document.isc.example.options.selectedIndex][y].length;i++){
temp1.options[i]=new Option(secondGroup[document.isc.example.options.selectedIndex][y][i].text,secondGroup[document.isc.example.options.selectedIndex][y][i].value)
}
temp1.options[0].selected=true
}
function redirect2(){
window.open(temp1.value,"","toolbar=no,location=yes,directories=no,status=no,menubar=no,scrollbars=yes, resizable=yes,copyhistory=yes,width=700,height=450");
}
//-->
</script>//
还有能循环取出的地方不要一直手写,数据量小还行,这要在多点车型,