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

 

你可能感兴趣的:(下拉框)