js下拉框二级关联菜单效果代码具体实现

复制代码 代码如下:

  <!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="doublecombo">

  <p>

  <select name="example" size="1" onChange="redirect(this.options.selectedIndex)">

  <option>特效代码</option>

  <option>网页语言</option>

  <option>软件教程</option>

  </select>

  <select name="stage2" size="1">

  <option value="/texiao/shubiao">鼠标类</option>

  <option value="/texiao/chuangkou">窗口类</option>

  <option value="/texiao/daohang">导航类</option>

  </select>

  <input type="button" name="test" value="Go!"

  onClick="go()">

  </p>

  <script>

  <!--

  var groups=document.doublecombo.example.options.length

  var group=new Array(groups)

  for (I=0; I<groups; I++)

  group[I]=new Array()

  group[0][0]=new Option("鼠标类","/texiao/shubiao")

  group[0][1]=new Option("窗口类","/texiao/chuangkou")

  group[0][2]=new Option("导航类","/texiao/daohang")

  group[1][0]=new Option("ASP","/yuyan/asp")

  group[1][1]=new Option("PHP","/yuyan/php")

  group[1][2]=new Option("JSP","/yuyan/jsp")

  group[2][0]=new Option("Dreamweaver","/ruanjian/Dreamweaver")

  group[2][1]=new Option("Fireworks","/ruanjian/Fireworks")

  group[2][2]=new Option("Flash","/ruanjian/Flash")

  group[2][3]=new Option("Photoshop","/ruanjian/Photoshop")

  var temp=document.doublecombo.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

  }

  function go(){

  location=temp.options[temp.selectedIndex].value

  }

  //-->

  </script>

  </form>

  </body>

  </html></td>

  </tr>

  </table>