简单JS多级下拉框无刷新 

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
 5 <title>小灰</title>
 6 </head>
 7 <body>
 8 <form name="form1" method="post">
 9 <select id="s1" name="s1"></select><select id="s2" name="s2"></select><select id="s3" name="s3"></select><select id="s4" name="s4"></select>
10 </form>
11 <script language="JavaScript">
12 <!--
13 function LianDong(arr, sel)
14 {
15  var me = this;
16  this.$ = function(o)
17  {
18   return document.getElementByIdx(o);
19  }
20  this.sub = function (i, pid)
21  {
22   for (var j=i+1; j<sel.length; j++)
23   {
24    me.$(sel[j]).length = 0;
25    me.$(sel[j]).options[0] = new Option("请选择", "");
26   }
27   for ( var j = 0; j < arr.length; j++)
28   {
29    if (arr[j][1] == pid)
30    {
31     me.$(sel[i+1]).options[me.$(sel[i+1]).length] = new Option(arr[j][2], arr[j][0]);
32    }
33   }
34  }
35  this.init = function()
36  {
37   me.sub(-1,"root");
38   for (var i=0; i<sel.length-1; i++)
39   {
40    me.$(sel[i]).onchange = function()
41    {
42     var i;
43     for (i=0; me.$(sel[i])!=this; i++);
44     me.sub(i, me.$(sel[i]).value);
45    }
46   }
47  }
48  this.init();
49 }
50 var array=new Array();
51 array[0]=new Array("华南地区","root","华南地区");
52 array[1]=new Array("华北地区","root","华北地区");
53 array[2]=new Array("上海","华南地区","上海");
54 array[3]=new Array("广东","华南地区","广东");
55 array[4]=new Array("徐家汇","上海","徐家汇");
56 array[5]=new Array("普托","上海","普托");
57 array[6]=new Array("广州","广东","广州");
58 array[7]=new Array("湛江","广东","湛江");
59 array[8]=new Array("湛江1","湛江","湛江1");
60 array[9]=new Array("湛江2","湛江","湛江2");
61 array[10]=new Array("广州1","广州","广州1");
62 array[11]=new Array("广州2","广州","广州2");
63 var select = new Array("s1","s2","s3","s4");
64 var liandong=new LianDong(array, select)
65 //-->
66 </script>
67 </body>
68 </html>

 

posted @ 2014-04-24 10:41  追逐者——Eagle  阅读(399)  评论(0)    收藏  举报