javascript动态无限绑定级联下拉

    一般动态绑定级联下拉框有2种作法：
    第一个就是选择一个后在后台重新绑定
    第二个就是把数据缓存在本地
    第一个方法选择一下后会产生一个postback会有刷新页面，好现现在有了ajax可以实现无刷页面，但如果碰到网速等客观原因还会比较慢，所以在数据量不是很大的时候可以将待绑定的数量缓存到本地然后在前台js绑定，现在给个例子：
    现在数据库有个为产品类型的表，表结构为typeno,typename,superno,以下是自动生成后的js文件

  1 // 绑定最顶层下拉
  2 function  BindTop(obj)
  3 {
  4    obj.options.add(new Option(defaultText,""));
  5    for (i in train)
  6    {
  7        if (train[i][2]==0)
  8            obj.options.add(new Option(train[i][1],train[i][0]));
  9    }
 10}
 11 // 绑定其它下拉
 12 function  Bind(obj,selectValue)
 13 {
 14    obj.options.length=0;
 15    obj.options.add(new Option(defaultText,""));
 16    if (selectValue!="")
 17    {
 18        for (i in train)
 19        {
 20            if (train[i][2]==selectValue)
 21                obj.options.add(new Option(train[i][1],train[i][0]));
 22        }
 23    }
 24}
 25 // 初始化
 26 function  init(text)
 27 {
 28    defaultText=text;
 29    BindTop(arguments[1]);
 30    for (var i=2;i<arguments.length ;i++ )
 31        Bind(arguments[i],"");
 32}
 33 /**/ /*****************************************************************
 34
 35                    以下代码为程序自动生成
 36
 37******************************************************************/
 38
 39 var  train = new  Array();
 40 train[ 0 ] = new  Array( " 2 " , " 产品培训 " , " 0 " );
 41 train[ 1 ] = new  Array( " 3 " , " 基础培训 " , " 0 " );
 42 train[ 2 ] = new  Array( " 45 " , " ES " , " 2 " );
 43 train[ 3 ] = new  Array( " 46 " , " PCO " , " 2 " );
 44 train[ 4 ] = new  Array( " 47 " , " PSG " , " 2 " );
 45 train[ 5 ] = new  Array( " 48 " , " Service Group " , " 2 " );
 46 train[ 6 ] = new  Array( " 56 " , " 5090G " , " 43 " );
 47 train[ 7 ] = new  Array( " 57 " , " 5090G " , " 47 " );
 48 train[ 8 ] = new  Array( " 58 " , " 5100G " , " 43 " );
 49 train[ 9 ] = new  Array( " 59 " , " 5800G " , " 43 " );
 50 train[ 10 ] = new  Array( " 60 " , " 8825G " , " 45 " );
 51 train[ 11 ] = new  Array( " 61 " , " 8830G " , " 45 " );
 52 train[ 12 ] = new  Array( " 62 " , " 8850G " , " 45 " );
 53 train[ 13 ] = new  Array( " 63 " , " 8855G " , " 45 " );
 54 train[ 14 ] = new  Array( " 64 " , " ACOLOR " , " 44 " );
 55 train[ 15 ] = new  Array( " 65 " , " Arita " , " 43 " );
 56 train[ 16 ] = new  Array( " 66 " , " BUENO1 " , " 43 " );
 57 train[ 17 ] = new  Array( " 67 " , " Chihiro " , " 43 " );
 58 train[ 18 ] = new  Array( " 68 " , " COPYCNTL " , " 43 " );
 59 train[ 19 ] = new  Array( " 69 " , " DCS " , " 43 " );
 60 train[ 20 ] = new  Array( " 70 " , " DOCUCOLOR " , " 44 " );
 61 train[ 21 ] = new  Array( " 71 " , " DOCUPRINT " , " 47 " );
 62 train[ 22 ] = new  Array( " 72 " , " DOCUTECH " , " 47 " );
 63 train[ 23 ] = new  Array( " 73 " , " DP180 " , " 47 " );
 64 train[ 24 ] = new  Array( " 74 " , " EGRET " , " 43 " );
 65 train[ 25 ] = new  Array( " 75 " , " Einstein " , " 44 " );
 66 train[ 26 ] = new  Array( " 76 " , " FIERY " , " 44 " );
 67 train[ 27 ] = new  Array( " 77 " , " Fuhjin " , " 47 " );
 68 train[ 28 ] = new  Array( " 78 " , " FXCF495 " , " 47 " );
 69 train[ 29 ] = new  Array( " 79 " , " GENJI " , " 45 " );
 70 train[ 30 ] = new  Array( " 80 " , " HANA " , " 43 " );
 71 train[ 31 ] = new  Array( " 81 " , " HUANGPU " , " 43 " );
 72 train[ 32 ] = new  Array( " 82 " , " IGEN3 " , " 44 " );
 73 train[ 33 ] = new  Array( " 83 " , " IMARI " , " 43 " );
 74 train[ 34 ] = new  Array( " 84 " , " KAMATARI " , " 45 " );
 75 train[ 35 ] = new  Array( " 85 " , " Kaul " , " 43 " );
 76 train[ 36 ] = new  Array( " 86 " , " Kutani " , " 43 " );
 77 train[ 37 ] = new  Array( " 87 " , " LAKES " , " 43 " );
 78 train[ 38 ] = new  Array( " 88 " , " Lakes 2 " , " 43 " );
 79 train[ 39 ] = new  Array( " 89 " , " LIMOGES " , " 44 " );
 80 train[ 40 ] = new  Array( " 90 " , " Louise " , " 43 " );
 81 train[ 41 ] = new  Array( " 91 " , " MASHU2 " , " 43 " );
 82 train[ 42 ] = new  Array( " 92 " , " MAX200 " , " 45 " );
 83 train[ 43 ] = new  Array( " 93 " , " MEISSEN " , " 44 " );
 84 train[ 44 ] = new  Array( " 94 " , " MOHICAN " , " 47 " );
 85 train[ 45 ] = new  Array( " 95 " , " Nausicca " , " 43 " );
 86 train[ 46 ] = new  Array( " 96 " , " NOZOMI " , " 43 " );
 87 train[ 47 ] = new  Array( " 97 " , " Nuvera " , " 47 " );
 88 train[ 48 ] = new  Array( " 98 " , " Ocean " , " 43 " );
 89 train[ 49 ] = new  Array( " 99 " , " Ocean2 " , " 43 " );
 90 train[ 50 ] = new  Array( " 100 " , " Others " , " 47 " );
 91 train[ 51 ] = new  Array( " 101 " , " P SERIES " , " 43 " );
 92 train[ 52 ] = new  Array( " 102 " , " Pazu " , " 43 " );
 93 train[ 53 ] = new  Array( " 103 " , " Philadelphia " , " 47 " );
 94 train[ 54 ] = new  Array( " 104 " , " PLOCKMATIC " , " 47 " );
 95 train[ 55 ] = new  Array( " 105 " , " Ryoma " , " 45 " );
 96 train[ 56 ] = new  Array( " 106 " , " Sanremo " , " 43 " );
 97 train[ 57 ] = new  Array( " 107 " , " Sheeta " , " 43 " );
 98 train[ 58 ] = new  Array( " 108 " , " SILVERSTONE " , " 43 " );
 99 train[ 59 ] = new  Array( " 109 " , " Sorrento " , " 47 " );
100 train[ 60 ] = new  Array( " 110 " , " TAHOE " , " 47 " );
101 train[ 61 ] = new  Array( " 111 " , " TAISHAN " , " 43 " );
102 train[ 62 ] = new  Array( " 112 " , " Tarzan Color " , " 43 " );
103 train[ 63 ] = new  Array( " 113 " , " TARZAN MONO " , " 43 " );
104 train[ 64 ] = new  Array( " 114 " , " TSUBAKI " , " 46 " );
105 train[ 65 ] = new  Array( " 115 " , " VARENNE " , " 43 " );
106 train[ 66 ] = new  Array( " 116 " , " VIVACE " , " 43 " );
107 train[ 67 ] = new  Array( " 117 " , " WG FAX " , " 43 " );
108 train[ 68 ] = new  Array( " 118 " , " XSW " , " 47 " );
109

说明一下数组 train[0]=new Array("2","产品培训","0");
2为typeno即绑定后的value，产品培训为typename即绑定后的text，0为上一级的typeno（第一级为0）
下面是页面代码：

 1 < HTML >
 2 < HEAD >
 3 < TITLE > javascript 动态绑定DEMO </ TITLE >
 4 < SCRIPT  LANGUAGE ="JavaScript"  src ="traintype.js"  charset ="utf-8" ></ SCRIPT >
 5 < SCRIPT  LANGUAGE ="JavaScript" >
 6<!--
 7    function ChangeType()
 8    {
 9        Bind(document.all.category,document.all.type.options[document.all.type.selectedIndex].value);
10        ChangeCategory();
11    }
12
13    function ChangeCategory()
14    {
15        Bind(document.all.product,document.all.category.options[document.all.category.selectedIndex].value);
16    }
17//-->
18 </ SCRIPT >
19 </ HEAD >
20 < BODY  onload ="init('全部',document.all.type,document.all.category,document.all.product)" >
21 < P > 培训类型：
22      < SELECT  ID ="type"  onchange ="ChangeType()" >
23
24      </ SELECT >
25 < P > 产品类型：
26      < SELECT  ID ="category"  onchange ="ChangeCategory()" >
27             
28      </ SELECT >
29 < P > 产品机型：
30      < SELECT  ID ="product" >
31             
32      </ SELECT >
33
34 </ BODY >
35 </ HTML >

绑定时只要把select对象传进去就可以了，有几个传几个，js里会自动判断的
最后就是后台动态生成待绑定数据的代码这里以asp.net为例：

 1 DataTable type  =  ;
 2             DataTable category  =  ;
 3             DataTable product  =  ;
 4             
 5              // 动态生成培训类型的js脚本
 6             System.IO.StreamWriter sw  =   new  System.IO.StreamWriter(Server.MapPath( " ../javascript/traintype.js " ));
 7             sw.WriteLine( " var train=new Array(); " );
 8              int  i  =   0 ;
 9
10              // 生成培训类型
11              for  (; i  <  type.Rows.Count; i ++ )
12              {
13                sw.WriteLine(string.Format("train[{0}]=new Array(\"{1}\",\"{2}\",\"0\");", i, type.Rows[i]["TypeNo"].ToString(), type.Rows[i]["TypeName"].ToString()));
14                sw.Flush();
15            }
16
17              // 生成产品类型
18              for  (; i  <  category.Rows.Count; i ++ )
19              {
20                sw.WriteLine(string.Format("train[{0}]=new Array(\"{1}\",\"{2}\",\"{3}\");", i, category.Rows[i]["TypeNo"].ToString(), category.Rows[i]["TypeName"].ToString(), category.Rows[i]["SuperType"].ToString()));
21                sw.Flush();
22            }
23
24              // 生成产品机型
25              for  (; i  <  product.Rows.Count; i ++ )
26              {
27                sw.WriteLine(string.Format("train[{0}]=new Array(\"{1}\",\"{2}\",\"{3}\");", i, product.Rows[i]["TypeNo"].ToString(), product.Rows[i]["TypeName"].ToString(), product.Rows[i]["SuperType"].ToString()));
28                sw.Flush();
29            }
30             sw.Close();
31             sw.Dispose();

转载于:https://www.cnblogs.com/heliguan/articles/979508.html