js 三级关联菜单效果实例_Javascript教程-查字典教程网
js 三级关联菜单效果实例
js 三级关联菜单效果实例
发布时间:2016-12-30 来源:查字典编辑
摘要:复制代码代码如下:js三级关联菜单---Select1----WebmasterSitesNewsSites---Select2------...

复制代码 代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html;charset=gb2312" />

<title>js 三级关联菜单</title>

</head>

<body>

<FORM name="isc">

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

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("---Select2---"," ");

group[1][0]=new Option("Now Select This One"," ");

group[1][1]=new Option("JavaScript","47");

group[1][2]=new Option("DHTML","46");

group[1][3]=new Option("CGI","45");

group[2][0]=new Option("Now Select This One"," ");

group[2][1]=new Option("General News","115");

group[2][2]=new Option("Technology News","116");

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("---Select 3---"," ");

secondGroup[1][0][0]=new Option("---Select 3---"," ");

secondGroup[1][1][0]=new Option("Now Select This One"," ");

secondGroup[1][1][1]=new Option("Website Abstraction","http://wsabstract");

secondGroup[1][1][2]=new Option("JavaScript for the non programmer","http://webteacher/javascript/");

secondGroup[1][1][3]=new Option("Java-Scripts.net","http://www.jb51.net");

secondGroup[1][2][0]=new Option("Now Select This One"," ");

secondGroup[1][2][1]=new Option("Dynamic Drive","dynamicdrive");

secondGroup[1][2][2]=new Option("Beginner's Guide to DHTML","geocities/ResearchTriangle/Facility/4490/");

secondGroup[1][2][3]=new Option("Web Coder","http://sc.jb51.net/");

secondGroup[1][3][0]=new Option("Now Select This One"," ");

secondGroup[1][3][1]=new Option("CGI Resources","cgi-resources");

secondGroup[1][3][2]=new Option("Ada's Intro to CGI","http://play.jb51.net/");

secondGroup[2][0][0]=new Option("---Select 3---"," ");

secondGroup[2][1][0]=new Option("Now Select This One"," ");

secondGroup[2][1][1]=new Option("CNN","cnn");

secondGroup[2][1][2]=new Option("MSNBC","msnbc");

secondGroup[2][1][3]=new Option("ABC News","abcnews");

secondGroup[2][2][0]=new Option("Now Select A Page"," ");

secondGroup[2][2][1]=new Option("News","news");

secondGroup[2][2][2]=new Option("Wired","wired");

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(z){

window.location=temp1[z].value

}

//-->

</script>

</FORM>

</body>

</html></td>

</tr>

</table>

相关阅读
推荐文章
猜你喜欢
附近的人在看
推荐阅读
拓展阅读
  • 大家都在看
  • 小编推荐
  • 猜你喜欢
  • 最新Javascript教程学习
    热门Javascript教程学习
    编程开发子分类