javascript动态无限绑定级联下拉
一般动态绑定级联下拉框有2种作法：
第一个就是选择一个后在后台重新绑定
第二个就是把数据缓存在本地
第一个方法选择一下后会产生一个postback会有刷新页面，好现现在有了ajax可以实现无刷页面，但如果碰到网速等客观原因还会比较慢，所以在数据量不是很大的时候可以将待绑定的数量缓存到本地然后在前台js绑定，现在给个例子：
现在数据库有个为产品类型的表，表结构为typeno,typename,superno,以下是自动生成后的js文件
2为typeno即绑定后的value，产品培训为typename即绑定后的text，0为上一级的typeno（第一级为0）
下面是页面代码：
绑定时只要把select对象传进去就可以了，有几个传几个，js里会自动判断的
最后就是后台动态生成待绑定数据的代码这里以asp.net为例：
第一个就是选择一个后在后台重新绑定
第二个就是把数据缓存在本地
第一个方法选择一下后会产生一个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
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
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>
<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();
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();