js入门·表单元素（select下拉列表）制作二级联动菜单和网站导航

对于脚本来说，最复杂的表单元素对象就是select了，他是一个复合对象，包含OPTION对象数组的对象

演示一：导航,这个多见于网站友情链接

请选择您要去的网站天轰穿系列教程博客园CSDN

演示二：地区二级无刷新联动菜单（其实这个例题也适用了关联数组，只是说被关联的数组是在一级数组的内部，如果有不明白，就看下 http://www.cnblogs.com/thcjp/archive/2006/08/04/467761.html 这篇，专门介绍数组的文字）

注意,我在二级菜单里做了点小动作,呵呵!!

四川江苏广西浙江 绵阳成都德阳广元南充

<% @LANGUAGE="JAVASCRIPT" CODEPAGE="936" %>
<! 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"  ontent ="text/html; charset=gb2312"   />
< title > 表单元素（select下拉列表）制作二级联动菜单和网站导航 </ title >
< script  language ="javascript" >
//下面这个函数是演示一的处理代码
function al(x){
var list=document.Url.select1
//将selsect1对象赋给变量list，方便以后引用，虽然这里只引用一次，但是作为一个好习惯，我们还是有必要坚持的
    location=list.options[x].value//把页面转向select的value值
}
//下面函数是演示二，联动菜单的处理代码
function makeshi(x){
    var form2=document.diqu.one.options.length;//这句解释同上
    var diqul=new Array(form2)//新建一个数组，项数为第一个下拉列表的项数
    for(i=0;i<form2;i++)//循环第一个下拉列表的项数那么多次
        diqul[i]=new Array();//子循环
        //下面是给每个循环赋值
            diqul[0][0]=new Option("绵阳","绵阳");
                diqul[0][1]=new Option("成都","成都");
                diqul[0][2]=new Option("广元","广元");
            diqul[1][0]=new Option("南京","南京");
                diqul[1][1]=new Option("苏州","苏州");
                diqul[1][2]=new Option("常州","常州");
            diqul[2][0]=new Option("南宁","南宁");
                diqul[2][1]=new Option("柳州","柳州");
                diqul[2][2]=new Option("北海","北海");
            diqul[3][0]=new Option("杭州","杭州");
                diqul[3][1]=new Option("温州","温州");
                diqul[3][2]=new Option("义乌","义乌");
    var shi=document.diqu.shi;//方便引用
    for(m=shi.options.length-1;m>0;m--)
    //这个要看清楚,因为要重新填充下拉列表的话必须先清除里面原有的项,清除和增加当然是有区别的了,所以用递减
        shi.options[m]=null;//将该项设置为空,也就等于清除了
    for(j=0;j<diqul[x].length;j++){//这个循环是填充下拉列表
        shi.options[j]=new Option(diqul[x][j].text,diqul[x][j].value)
        //注意上面这据,列表的当前项等于 新项(数组对象的x,j项的文本为文本，)
    }
    shi.options[0].selected=true;//设置被选中的初始值
}
</ script >
</ head >
< body >
< p > 对于脚本来说，最复杂的表单元素对象就是select了，他是一个复合对象，包含OPTION对象数组的对象 </ p >
< p >< strong > 演示一：导航,这个多见于网站友情链接 </ strong ></ p >
< form  id ="form1"  name ="Url" >
   < select  name ="select1"  onchange ="al(options.selectedIndex)" >
     < option  value ="#" > 请选择您要去的网站 </ option >
     < option  value ="http://thcjp.cnblogs.com" > 天轰穿系列教程 </ option >
     < option  value ="http://www.cnblogs.com" > 博客园  </ option >
     < option  value ="http://www.csdn.net" > CSDN </ option >
   </ select >
</ form >
< p >< strong > 演示二：地区二级无刷新联动菜单 </ strong > （其实这个例题也适用了关联数组，只是说被关联的数组是在一级数组的内部，如果有不明白，就看下  < a  href ="http://www.cnblogs.com/thcjp/archive/2006/08/04/467761.html" > http://www.cnblogs.com/thcjp/archive/2006/08/04/467761.html </ a >  这篇，专门介绍数组的文字） </ p >
< form  id ="form2"  name ="diqu"  method ="post"  action ="" >
   < select  name ="one"  size ="1"  onchange ="makeshi(options.selectedIndex)" >
     < option  value ="0" > 四川 </ option >
     < option  value ="1" > 江苏 </ option >
     < option  value ="2" > 广西 </ option >
     < option  value ="3" > 浙江 </ option >
   </ select >
   < select  name ="shi" >
     < option  value ="绵阳" > 绵阳 </ option >
     < option  value ="成都" > 成都 </ option >
     < option  value ="德阳" > 德阳 </ option >
     < option  value ="广元" > 广元 </ option >
     < option  value ="南充" > 南充 </ option >
   </ select >
</ form >
</ body >
</ html >