javascript动态无限绑定级联下拉

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

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

 1DataTable 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();