JavaScript实现select功能代码

JavaScript实现select功能代码
在进行JavaScript实现select所支持的功能实现时，首先需要了解一些标识的定义，比如true-这个是控制单击时出现下拉框体的标识等等。

调用时可以这样：
1，tempStr=GetNewSelectStr(dataTable.value,"select"+rowIndex,true);
2,makeSelectBox("select"+rowIndex,tempStr,value,obj);
tempStr-这个是返回的下拉列表值的框体
dataTable.value-这个是数据源(我这里是一张表)
"select"+rowIndex-这个是ID号，也就是当前这个select的id号(我这里是有多个select所以ID号是自动的)
true-这个是控制单击时出现下拉框体的标识
value-这个是初始的时候显示在select输入框中的值
obj-这个是要显示select的对象
JavaScript实现select源代码：
1.var nowOpenedSelectBox = "";
2.var mousePosition = "";
3.var userList=null;
4.function selectThisValue(thisId,thisIndex,thisValue,thisString) {
5.var objId = thisId;
6.var nowIndex = thisIndex;
7.var valueString = thisString;
8.var sourceObj = $(objId);
9.var nowSelectedValue = document.getElementById(nowIndex+thisId).inne
rHTML;
10.hideOptionLayer(objId);
11.if (sourceObj) sourceObj.value = nowSelectedValue;
12.settingValue(objId,valueString);
13.selectBoxFocus(objId);
14.if (sourceObj.onchange) sourceObj.onchange();
15.}
16.function settingValue(thisId,thisString) {
17.var objId = thisId;
18.var valueString = thisString;
19.var selectedArea = document.getElementById(objId+"selectBoxSelectedV
alue");
20.if (selectedArea) {
21.if(navigator.appName.indexOf("Explorer") > -1){
22.selectedArea.innerText = valueString;
23.}
24.else{
25.selectedArea.textContent = valueString;
26.}
27.}
28.}
29.var l=0;
30.//显示下拉框中的值
31.function viewOptionLayer(thisId,Istask,flag) {
32.var objId = thisId;
33.var selectInfo="";
34.var optionHeight = 18; // 高
35.var optionMaxNum = 7; //
36.var optionInnerLayerHeight = "";
37.var selectBoxWidth =130;
38.var selectBoxHeight =17;
39.l=userList.Rows.length;
40.var optionLayer = document.getElementById(objId+"selectBoxs");
41.if(optionLayer.innerHTML=="")
42.{
43.if (l > optionMaxNum) optionInnerLayerHeight = "height:"+ (optionHei
ght * optionMaxNum) + "px";
44.selectInfo = "";
45.if(Istask=="true")
46.{
47.selectInfo += " ";
48.selectInfo += " ";
49.selectInfo += "
50.";
51.selectInfo += " ";
52.selectInfo += " ";
53.selectInfo += "
54.";
55.}
56.else
57.{
58.selectInfo += " ";
59.selectInfo += " ";
60.selectInfo += "
61.";
62.}
63.selectInfo += " ";
64.selectInfo += " ";
65.selectInfo += "
66.";
67.selectInfo += " ";
68.for (var i=0 ; i < l ; i++)
69.{
70.var nowValue = userList.Rows[i][userList.Columns[0].Name];
71.var nowText = userList.Rows[i][userList.Columns[0].Name];
72.if(Istask=="true")
73.{
74.selectInfo += " ";
75.}
76.else
77.{
78.selectInfo += "
79.";
80.}
81.selectInfo += " " + nowText + "";
82.// selectInfo += " ";
83.selectInfo += "
84.";
85.}
86.selectInfo += " ";
87.selectInfo += "
88.";
89.selectInfo += " ";
90.selectInfo += "
91.";
92.selectInfo +=
93."";
94.optionLayer.innerHTML=selectInfo;
95.}
96.if (flag && optionLayer.style.display=="none"){ optionLayer.style.di
splay = "";optionLayer.focus();}
97.else
98.{
99.optionLayer.style.display = "none";
100.if(document.getElementById("level"))
101.{
102.document.getElementById("level").style.display="";
103.}
104.if(document.getElementById("priority"))
105.{
106.document.getElementById("priority").style.display="";
107.}
108.}
109.if(!flag){optionLayer.style.display = "";optionLayer.focus();} 110.for(var i=0;i
111.{
112.if(document.getElementById("select"+i+""+"viewOptions"))
113.{
114.document.getElementById("select"+i+""+"viewOptions").style.display="
none";
115.}
116.}
117.document.getElementById(objId+"viewOptions").style.display=""; 118.if(document.getElementById("level"))
119.{
120.document.getElementById("level").style.display="none";
121.}
122.if(document.getElementById("priority"))
123.{
124.document.getElementById("priority").style.display="none";
125.}
126.nowOpenedSelectBox = objId;
127.setMousePosition("inBox");
128.}
129.//支持首字母筛选、回车键取值、上下键选值功能
130.function firstLetter(thisId){
131.var count=0;
132.var selectedVal="";
133.if(document.getElementById(thisId+"viewOptions").style.display=="")
134.{
135.document.getElementById(thisId+"viewOptions").focus();
136.var asciiCode=String.fromCharCode(event.keyCode).toLowerCase(); 137.var selectValue="";
138.if(event.keyCode==38)
139.{
140.for(var i=0;i
141.{
142.if(document.getElementById(i+thisId).className=="selectBoxOptionOver " && i>0)
143.{
144.document.getElementById(i+thisId).style.backgroundColor='#ffffff';
145.document.getElementById(i+thisId).style.color='#253449';
146.document.getElementById(i+thisId).className='selectBoxOption'; 147.document.getElementById((i-1)+thisId).style.backgroundColor='#2c59aa ';
148.document.getElementById((i-1)+thisId).style.color='#ffffff'; 149.document.getElementById((i-1)+thisId).className='selectBoxOptionOver ';
150.document.getElementById(thisId+"viewOptions").scrollTop= (i-1)*20;
151.count=1;
152.break;
153.}
154.}
155.if(count==0)
156.{
157.document.getElementById((l-1)+thisId).style.backgroundColor='#2c59aa ';
158.document.getElementById((l-1)+thisId).style.color='#ffffff'; 159.document.getElementById((l-1)+thisId).className='selectBoxOptionOver ';
160.}
161.}
162.if(event.keyCode==40)
163.{
164.for(var i=0;i
165.{
166.if(document.getElementById(i+thisId).className=="selectBoxOptionOver " && i
167.{
168.document.getElementById(i+thisId).style.backgroundColor='#ffffff';
169.document.getElementById(i+thisId).style.color='#253449';
170.document.getElementById(i+thisId).className='selectBoxOption'; 171.document.getElementById((i+1)+thisId).style.backgroundColor='#2c59aa ';
172.document.getElementById((i+1)+thisId).style.color='#ffffff'; 173.document.getElementById((i+1)+thisId).className='selectBoxOptionOver ';
174.if(i>10)
175.{
176.document.getElementById(thisId+"viewOptions").scrollTop= (i+1)*19;
177.}
178.else
179.{
180.document.getElementById(thisId+"viewOptions").scrollTop= (i+1)*10;
181.}
182.count=1;
183.break;
184.}
185.}
186.&nb
187.sp; if(count==0)
188.{
189.document.getElementById(0+thisId).style.backgroundColor='#2c59aa';
190.document.getElementById(0+thisId).style.color='#ffffff';
191.document.getElementById(0+thisId).className='selectBoxOptionOver';
192.}
193.}
194.if(event.keyCode==13)
195.{
196.for(var i=0;i
197.{
198.if(document.getElementById(i+thisId).className=="selectBoxOptionOver ")
199.{
200.selectedVal=document.getElementById(i+thisId).innerHTML;
201.var sourceObj = $(thisId);
202.hideOptionLayer(thisId);
203.if (sourceObj) sourceObj.value = selectedVal;
204.settingValue(thisId,selectedVal);
205.selectBoxFocus(thisId);
206.if (sourceObj.onchange) sourceObj.onchange();
207.document.getElementById(thisId+"viewOptions").style.display="none";
208.if(document.getElementById("level"))
209.{
210.document.getElementById("level").style.display="";
211.}
212.if(document.getElementById("priority"))
213.{
214.document.getElementById("priority").style.display="";
215.}
216.break;
217.}
218.}
219.}
220.for(var i=0 ; i < l ; i++)
221.{
222.selectValue=document.getElementById(i+thisId).innerHTML;
223.if(asciiCode==selectValue.substring(0,1))
224.{
225.resetStyle(thisId);
226.document.getElementById(i+thisId).style.backgroundColor='#2c59aa';
227.document.getElementById(i+thisId).style.color='#ffffff';
228.document.getElementById(i+thisId).className='selectBoxOptionOver';
229.document.getElementById(thisId+"viewOptions").scrollTop= i*19; 230.break;
231.}
232.}
233.}
234.}
235.//清除被选中的下拉列表值的样式
236.function resetStyle(thisId){
237.for(var i=0;i
238.{
239.document.getElementById(i+thisId).style.backgroundColor='#ffffff';
240.document.getElementById(i+thisId).style.color='#253449';
241.document.getElementById(i+thisId).className='selectBoxOption'; 242.}
243.}
244.//隐藏下拉框
245.function hideOptionLayer(thisId) {
246.var objId = thisId;
247.var optionLayer = document.getElementById(objId+"selectBoxs"); 248.if (optionLayer) optionLayer.style.display = "none";
249.if(document.getElementById("level"))
250.{
251.document.getElementById("level").style.display="";
252.}
253.if(document.getElementById("priority"))
254.{
255.document.getElementById("priority").style.display="";
256.}
257.}
258.function setMousePosition(thisValue) {
259.var positionValue = thisValue;
260.mousePosition = positionValue;
261.}
262.function clickMouse() {
263.if (mousePosition == "out") hideOptionLayer(nowOpenedSelectBox); 264.}
265.function selectBoxFocus(thisId) {
266.var objId = thisId;
267.var obj = document.getElementById(objId + "selectBoxSelectedValue");
268.obj.className = "selectBoxSelectedAreaFocus";
269.obj.focus();
270.}
271.function selectBoxBlur(thisId) {
272.var objId = thisId;
273.var obj = document.getElementById(objId + "selectBoxSelectedValue");
274.obj.className = "selectBoxSelectedArea";
275.}
276.function hiddenOptions(thisId){
277.document.getElementById(thisId+"viewOptions").style.display="none";
278.if(document.getElementById("level"))
279.{
280.document.getElementById("level").style.display="";
281.}
282.if(document.getElementById("priority"))
283.{
284.document.getElementById("priority").style.display="";
285.}
286.}
287.function makeSelectBox(index,newSelect,value,obj) {
288.newSelect=newSelect.replace(/(select0)/g,index);
289.$(obj).html(newSelect);
290.settingValue(index,value);
291.}
292.function GetNewSelectStr(table,index,IsTask){
erList=table;
294.var downArrowSrc = "../images/sanjiao.gif"; //三角295.var downArrowSrcWidth = 16; //宽
296.var selectBoxWidth =130;
297.var selectBoxHeight =17;
298.newSelect="
299."
300.; newSelect += "";
301.newSelect += " ";
302.newSelect += " ";
303.newSelect += " ";
304.if(IsTask)
305.{
306.newSelect += " ";
307.newSelect += " ";
308.}
309.else
310.{
311.newSelect += "
312.";
313.newSelect += " ";
314.}
315.newSelect += " ";
316.newSelect += "
317.";
318.newSelect += " ";
319.newSelect += " ";
320.newSelect += "
321.";
322.newSelect += "";
323.return newSelect ;
324.}。