asp.net+c#制作网站是不支持combobox控件的，只能使用dropdownlist控件，但有些功能还是不能和combobox相媲美。现在给出一个完整的列子供大家参考
Code
1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
2
3 <html>
4 <head>
5 <title>ComboBox Demo</title>
6
7 <style>
8 body {font-size:9pt;font-family:verdana;}
9 button {cursor:hand;border:1px solid black;font-family:arial;font-size:9pt;}
10 a {color:red;}
11 a:hover {color:blue}
12 </style>
13
14 </head>
15
16 <body>
17 <script src="ComboBox.js"></script>
18
19 <script>
20
21 dm=new ComboBox("dm")
22
23 dm.add(
24 new ComboBoxItem("barge",1),
25 new ComboBoxItem("benluc",2),
26 new ComboBoxItem("benlieeeeck",3),
27 new ComboBoxItem("taco",4)
28 )
29 /*
30 // generate 1000 more to test performance
31 for (var i = 0; i < 100; i++ )
32 dm.add(new ComboBoxItem(String(i)));
33 */
34
35 </script>
36
37 <br><br><br>
38
39 <button hidefocus onClick="alert(dm.value)">Show Value</button> <button hidefocus
40 onClick="dm.add(new ComboBoxItem(window.prompt('Type in the text to add',''),window.prompt('Type in a value to add','')))"
41 >Add Item</button> <button hidefocus onClick="dm.remove(window.prompt('Type in an index to remove',''))"
42 >Remove Item</button>
43 <br>
44 <br>
45
46 </body>
47 </html>
48
49
ComboBox.js 文件
1/**//*
2
* ComboBox
3 * By Jared Nuzzolillo
4 *
5 * Updated by Erik Arvidsson
6 * http://webfx.eae.net/contact.html#erik
7 * 2002-06-13 Fixed Mozilla support and improved build performance
8 *
9
*/
10
11Global_run_event_hook = true;
12Global_combo_array = new Array();
13
14Array.prototype.remove=function(dx)
15
{
16
if(isNaN(dx)||dx>this.length){self.status='Array_remove:invalid request-'+dx;return false}
17 for(var i=0,n=0;i<this.length;i++)
18 {
19 if(this[i]!=this[dx])
20 {
21 this[n++]=this[i]
22
}
23 }
24 this.length-=1
25}
26
27function ComboBox_make()
28{
29 var bt,nm;
30 nm = this.name+"txt";
31
32 this.txtview = document.createElement("INPUT")
33 this.txtview.type = "text";
34 this.txtview.name = nm;
35 this.txtview.id = nm;
36 this.txtview.className = "combo-input"
37 this.view.appendChild(this.txtview);
38
39 this.valcon = document.createElement("INPUT");
40 this.valcon.type = "hidden";
41 this.view.appendChild(this.valcon)
42
43 var tmp = document.createElement("IMG");
44 tmp.src = "___";
45 tmp.style.width = "1px";
46 tmp.style.height = "0";
47 this.view.appendChild(tmp);
48
49 var tmp = document.createElement("BUTTON");
50 tmp.appendChild(document.createTextNode(6));
51 tmp.className = "combo-button";
52
53 this.view.appendChild(tmp);
54 tmp.onfocus = function () { this.blur(); };
55 tmp.onclick = new Function ("", this.name + ".toggle()");
56}
57
58function ComboBox_choose(realval,txtval)
59{
60 this.value = realval;
61 var samstring = this.name+".view.childNodes[0].value='"+txtval+"'"
62 window.setTimeout(samstring,1)
63 this.valcon.value = realval;
64}
65
66function ComboBox_mouseDown(e)
67{
68 var obj,len,el,i;
69 el = e.target ? e.target : e.srcElement;
70 while (el.nodeType != 1) el = el.parentNode;
71 var elcl = el.className;
72 if(elcl.indexOf("combo-")!=0)
73 {
74
75 len=Global_combo_array.length
76 for(i=0;i<len;i++)
77 {
78
79 curobj = Global_combo_array[i]
80
81 if(curobj.opslist)
82 {
83 curobj.opslist.style.display='none'
84 }
85 }
86 }
87}
88
89function ComboBox_handleKey(e)
90{
91 var key,obj,eobj,el,strname;
92 eobj = e;
93 key = eobj.keyCode;
94 el = e.target ? e.target : e.srcElement;
95 while (el.nodeType != 1) el = el.parentNode;
96 elcl = el.className
97 if(elcl.indexOf("combo-")==0)
98 {
99 if(elcl.split("-")[1]=="input")
100 {
101 strname = el.id.split("txt")[0]
102 obj = window[strname];
103
104 obj.expops.length=0
105 obj.update();
106 obj.build(obj.expops);
107 if(obj.expops.length==1&&obj.expops[0].text=="(No matches)"){}//empty
108 else{obj.opslist.style.display='block';}
109 obj.value = el.value;
110 obj.valcon.value = el.value;
111 }
112 }
113}
114
115function ComboBox_update()
116{
117 var opart,astr,alen,opln,i,boo;
118 boo=false;
119 opln = this.options.length
120 astr = this.txtview.value.toLowerCase();
121 alen = astr.length
122 if(alen==0)
123 {
124 for(i=0;i<opln;i++)
125 {
126 this.expops[this.expops.length]=this.options[i];boo=true;
127 }
128 }
129 else
130 {
131 for(i=0;i<opln;i++)
132 {
133 opart=this.options[i].text.toLowerCase().substring(0,alen)
134 if(astr==opart)
135 {
136 this.expops[this.expops.length]=this.options[i];boo=true;
137 }
138 }
139 }
140 if(!boo){this.expops[0]=new ComboBoxItem("(No matches)","")}
141}
142
143
144function ComboBox_remove(index)
145{
146 this.options.remove(index)
147}
148
149function ComboBox_add()
150{
151 var i,arglen;
152 arglen=arguments.length
153 for(i=0;i<arglen;i++)
154 {
155 this.options[this.options.length]=arguments[i]
156 }
157}
158
159function ComboBox_build(arr)
160{
161 var str,arrlen
162 arrlen=arr.length;
163 str = '<table class="combo-list-width" cellpadding=0 cellspacing=0>';
164 var strs = new Array(arrlen);
165 for(var i=0;i<arrlen;i++)
166 {
167 strs[i] = '<tr>' +
168 '<td class="combo-item" onClick="'+this.name+'.choose(\''+arr[i].value+'\',\''+arr[i].text+'\');'+this.name+'.opslist.style.display=\'none\';"' +
169 'onMouseOver="this.className=\'combo-hilite\';" onMouseOut="this.className=\'combo-item\'" > '+arr[i].text+' </td>' +
170 '</tr>';
171 }
172 str = str + strs.join("") + '</table>'
173
174 if(this.opslist){this.view.removeChild(this.opslist);}
175
176 this.opslist = document.createElement("DIV")
177 this.opslist.innerHTML=str;
178 this.opslist.style.display='none';
179 this.opslist.className = "combo-list";
180 this.opslist.onselectstart=returnFalse;
181 this.view.appendChild(this.opslist);
182}
183
184function ComboBox_toggle()
185{
186 if(this.opslist)
187 {
188 if(this.opslist.style.display=="block")
189 {
190 this.opslist.style.display="none"
191 }
192 else
193 {
194 this.update();
195 this.build(this.options);
196 this.view.style.zIndex = ++ComboBox.prototype.COMBOBOXZINDEX
197 this.opslist.style.display="block"
198 }
199 }
200 else
201 {
202 this.update();
203 this.build(this.options);
204 this.view.style.zIndex = ++ComboBox.prototype.COMBOBOXZINDEX
205 this.opslist.style.display="block"
206 }
207}
208
209function ComboBox()
210{
211 if(arguments.length==0)
212 {
213 self.status="ComboBox invalid - no name arg"
214 }
215
216 this.name = arguments[0];
217 this.par = arguments[1]||document.body
218 this.view = document.createElement("DIV");
219 this.view.style.position='absolute';
220 this.options = new Array();
221 this.expops = new Array();
222 this.value = ""
223
224 this.build = ComboBox_build
225 this.make = ComboBox_make;
226 this.choose = ComboBox_choose;
227 this.add = ComboBox_add;
228 this.toggle = ComboBox_toggle;
229 this.update = ComboBox_update;
230 this.remove = ComboBox_remove;
231
232 this.make()
233 this.txtview = this.view.childNodes[0]
234 this.valcon = this.view.childNodes[1]
235
236 this.par.appendChild(this.view)
237
238 Global_combo_array[Global_combo_array.length]=this;
239 if(Global_run_event_hook){ComboBox_init()}
240}
241
242ComboBox.prototype.COMBOBOXZINDEX = 1000 //change this if you must
243
244function ComboBox_init()
245{
246 if (document.addEventListener) {
247 document.addEventListener("keyup", ComboBox_handleKey, false );
248 document.addEventListener("mousedown", ComboBox_mouseDown, false );
249 }
250 else if (document.attachEvent) {
251 document.attachEvent("onkeyup", function () { ComboBox_handleKey(window.event); } );
252 document.attachEvent("onmousedown", function () { ComboBox_mouseDown(window.event); } );
253 }
254
255 Global_run_event_hook = false;
256}
257
258function returnFalse(){return false}
259
260function ComboBoxItem(text,value)
261{
262 this.text = text;
263 this.value = value;
264}
265
266document.write('<link rel="STYLESHEET" type="text/css" href="ComboBox.css">')
Code1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
2
3 <html>
4 <head>
5 <title>ComboBox Demo</title>
6
7 <style>
8 body {font-size:9pt;font-family:verdana;}
9 button {cursor:hand;border:1px solid black;font-family:arial;font-size:9pt;}
10 a {color:red;}
11 a:hover {color:blue}
12 </style>
13
14 </head>
15
16 <body>
17 <script src="ComboBox.js"></script>
18
19 <script>
20
21 dm=new ComboBox("dm")
22
23 dm.add(
24 new ComboBoxItem("barge",1),
25 new ComboBoxItem("benluc",2),
26 new ComboBoxItem("benlieeeeck",3),
27 new ComboBoxItem("taco",4)
28 )
29 /*
30 // generate 1000 more to test performance
31 for (var i = 0; i < 100; i++ )
32 dm.add(new ComboBoxItem(String(i)));
33 */
34
35 </script>
36
37 <br><br><br>
38
39 <button hidefocus onClick="alert(dm.value)">Show Value</button> <button hidefocus
40 onClick="dm.add(new ComboBoxItem(window.prompt('Type in the text to add',''),window.prompt('Type in a value to add','')))"
41 >Add Item</button> <button hidefocus onClick="dm.remove(window.prompt('Type in an index to remove',''))"
42 >Remove Item</button>
43 <br>
44 <br>
45
46 </body>
47 </html>
48
49
ComboBox.js 文件1
/**//*2
* ComboBox3
* By Jared Nuzzolillo4
*5
* Updated by Erik Arvidsson6
* http://webfx.eae.net/contact.html#erik7
* 2002-06-13 Fixed Mozilla support and improved build performance8
*9
*/10
11
Global_run_event_hook = true;12
Global_combo_array = new Array();13
14
Array.prototype.remove=function(dx)15
{ 16
if(isNaN(dx)||dx>this.length){self.status='Array_remove:invalid request-'+dx;return false}17
for(var i=0,n=0;i<this.length;i++)18
{ 19
if(this[i]!=this[dx])20
{21
this[n++]=this[i]22
}23
}24
this.length-=125
}26
27
function ComboBox_make()28
{29
var bt,nm;30
nm = this.name+"txt"; 31
32
this.txtview = document.createElement("INPUT")33
this.txtview.type = "text";34
this.txtview.name = nm;35
this.txtview.id = nm;36
this.txtview.className = "combo-input"37
this.view.appendChild(this.txtview);38
39
this.valcon = document.createElement("INPUT");40
this.valcon.type = "hidden";41
this.view.appendChild(this.valcon)42
43
var tmp = document.createElement("IMG");44
tmp.src = "___";45
tmp.style.width = "1px";46
tmp.style.height = "0";47
this.view.appendChild(tmp);48
49
var tmp = document.createElement("BUTTON");50
tmp.appendChild(document.createTextNode(6));51
tmp.className = "combo-button";52
53
this.view.appendChild(tmp);54
tmp.onfocus = function () { this.blur(); };55
tmp.onclick = new Function ("", this.name + ".toggle()");56
}57
58
function ComboBox_choose(realval,txtval)59
{60
this.value = realval;61
var samstring = this.name+".view.childNodes[0].value='"+txtval+"'"62
window.setTimeout(samstring,1)63
this.valcon.value = realval;64
}65
66
function ComboBox_mouseDown(e)67
{68
var obj,len,el,i;69
el = e.target ? e.target : e.srcElement;70
while (el.nodeType != 1) el = el.parentNode;71
var elcl = el.className;72
if(elcl.indexOf("combo-")!=0)73
{74
75
len=Global_combo_array.length76
for(i=0;i<len;i++)77
{78
79
curobj = Global_combo_array[i]80
81
if(curobj.opslist)82
{83
curobj.opslist.style.display='none'84
}85
}86
}87
}88
89
function ComboBox_handleKey(e)90
{91
var key,obj,eobj,el,strname;92
eobj = e;93
key = eobj.keyCode;94
el = e.target ? e.target : e.srcElement;95
while (el.nodeType != 1) el = el.parentNode;96
elcl = el.className97
if(elcl.indexOf("combo-")==0)98
{99
if(elcl.split("-")[1]=="input")100
{101
strname = el.id.split("txt")[0]102
obj = window[strname];103
104
obj.expops.length=0105
obj.update();106
obj.build(obj.expops);107
if(obj.expops.length==1&&obj.expops[0].text=="(No matches)"){}//empty108
else{obj.opslist.style.display='block';}109
obj.value = el.value;110
obj.valcon.value = el.value;111
}112
}113
}114
115
function ComboBox_update()116
{117
var opart,astr,alen,opln,i,boo;118
boo=false;119
opln = this.options.length120
astr = this.txtview.value.toLowerCase();121
alen = astr.length122
if(alen==0)123
{124
for(i=0;i<opln;i++)125
{126
this.expops[this.expops.length]=this.options[i];boo=true;127
}128
}129
else130
{131
for(i=0;i<opln;i++)132
{133
opart=this.options[i].text.toLowerCase().substring(0,alen)134
if(astr==opart)135
{136
this.expops[this.expops.length]=this.options[i];boo=true;137
}138
}139
}140
if(!boo){this.expops[0]=new ComboBoxItem("(No matches)","")}141
}142
143
144
function ComboBox_remove(index)145
{146
this.options.remove(index)147
}148
149
function ComboBox_add()150
{151
var i,arglen;152
arglen=arguments.length153
for(i=0;i<arglen;i++)154
{155
this.options[this.options.length]=arguments[i]156
}157
}158
159
function ComboBox_build(arr)160
{161
var str,arrlen162
arrlen=arr.length;163
str = '<table class="combo-list-width" cellpadding=0 cellspacing=0>';164
var strs = new Array(arrlen);165
for(var i=0;i<arrlen;i++)166
{167
strs[i] = '<tr>' +168
'<td class="combo-item" onClick="'+this.name+'.choose(\''+arr[i].value+'\',\''+arr[i].text+'\');'+this.name+'.opslist.style.display=\'none\';"' +169
'onMouseOver="this.className=\'combo-hilite\';" onMouseOut="this.className=\'combo-item\'" > '+arr[i].text+' </td>' +170
'</tr>';171
}172
str = str + strs.join("") + '</table>'173
174
if(this.opslist){this.view.removeChild(this.opslist);}175
176
this.opslist = document.createElement("DIV")177
this.opslist.innerHTML=str;178
this.opslist.style.display='none';179
this.opslist.className = "combo-list";180
this.opslist.onselectstart=returnFalse;181
this.view.appendChild(this.opslist); 182
}183
184
function ComboBox_toggle()185
{186
if(this.opslist)187
{188
if(this.opslist.style.display=="block")189
{190
this.opslist.style.display="none"191
}192
else193
{194
this.update();195
this.build(this.options);196
this.view.style.zIndex = ++ComboBox.prototype.COMBOBOXZINDEX197
this.opslist.style.display="block"198
}199
}200
else201
{202
this.update();203
this.build(this.options);204
this.view.style.zIndex = ++ComboBox.prototype.COMBOBOXZINDEX205
this.opslist.style.display="block"206
}207
}208
209
function ComboBox()210
{211
if(arguments.length==0)212
{213
self.status="ComboBox invalid - no name arg"214
}215
216
this.name = arguments[0];217
this.par = arguments[1]||document.body218
this.view = document.createElement("DIV");219
this.view.style.position='absolute';220
this.options = new Array();221
this.expops = new Array();222
this.value = ""223
224
this.build = ComboBox_build225
this.make = ComboBox_make;226
this.choose = ComboBox_choose;227
this.add = ComboBox_add;228
this.toggle = ComboBox_toggle;229
this.update = ComboBox_update;230
this.remove = ComboBox_remove;231
232
this.make()233
this.txtview = this.view.childNodes[0]234
this.valcon = this.view.childNodes[1]235
236
this.par.appendChild(this.view)237
238
Global_combo_array[Global_combo_array.length]=this;239
if(Global_run_event_hook){ComboBox_init()}240
}241
242
ComboBox.prototype.COMBOBOXZINDEX = 1000 //change this if you must243
244
function ComboBox_init() 245
{246
if (document.addEventListener) {247
document.addEventListener("keyup", ComboBox_handleKey, false );248
document.addEventListener("mousedown", ComboBox_mouseDown, false );249
}250
else if (document.attachEvent) {251
document.attachEvent("onkeyup", function () { ComboBox_handleKey(window.event); } );252
document.attachEvent("onmousedown", function () { ComboBox_mouseDown(window.event); } );253
}254
255
Global_run_event_hook = false;256
}257
258
function returnFalse(){return false}259
260
function ComboBoxItem(text,value)261
{262
this.text = text;263
this.value = value;264
}265
266
document.write('<link rel="STYLESHEET" type="text/css" href="ComboBox.css">')Code1 .combo-button {
2 cursor: hand;
3 cursor: pointer;
4 height: 20px;
5 border: 1px solid rgb(120,172,255);
6 padding: 0;
7 background: rgb(234,242,255);
8 width: 14px;
9 vertical-align: baseline;
10 font-size: 8pt;
11 font-family: Webdings, Marlett;
12 }
13 .combo-hilite {
14 cursor: hand;
15 cursor: pointer;
16 background: rgb(234,242,255);
17 border: 1px solid rgb(120,172,255);
18 color: black;
19 font-family: verdana;
20 font-size: 9pt;
21 }
22 .combo-item {
23 cursor: hand;
24 cursor: pointer;
25 background: white;
26 border: 1px solid white;
27 color: black;
28 font-family: verdana;
29 font-size: 9pt;
30 }
31
32 .combo-input {
33 border: 1px solid rgb(120,172,255) !important;
34 width: 138px !important;
35 vertical-align: baseline;
36 }
37
38 .combo-list table {
39 table-layout: fixed;
40 width: 149px;
41 }
42
43 .combo-list {
44 border: 1px solid black;
45 background: white;
46 padding: 1px;
47 width: 149px;
48
49 /* enable this if you want scroll bars
50 height: 200px;
51 overflow: auto;
52 overflow-x: visible;
53 overflow-y: auto;
54 scrollbar-base-color: rgb(234,242,255);
55 scrollbar-highlight-color: rgb(234,242,255);
56 scrollbar-3dlight-color: rgb(120,172,255);
57 scrollbar-darkshadow-color: rgb(120,172,255);
58 scrollbar-shadow-color: rgb(234,242,255);
59 scrollbar-face-color: rgb(234,242,255);
60 scrollbar-track-color: white;
61 scrollbar-arrow-color: black;
62 */
63 }
