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![]()
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-=1
25![]()
}
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.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![]()
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.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![]()
115![]()
function 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![]()
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.length
153![]()
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,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![]()
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![]()
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![]()
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.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![]()
242![]()
ComboBox.prototype.COMBOBOXZINDEX = 1000 //change this if you must
243![]()
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 <!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 }
浙公网安备 33010602011771号