js 三级关联菜单效果实例

  

复制代码 代码如下:

  <!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.glzy8.com");

  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.glzy8.com/");

  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.glzy8.com/");

  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>