JavaScript实现select功能代码.doc

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. varnowOpenedSelectBox=; 2. varmousePosition=; 3. varuserList=null; 4. functionselectThisValue(thisId,thisIndex,thisValue,thisString) 5. varobjId=thisId; 6. varnowIndex=thisIndex; 7. varvalueString=thisString; 8. varsourceObj=$(objId); 9. varnowSelectedValue=document.getElementById(nowIndex+thisId).innerHTML; 10. hideOptionLayer(objId); 11. if(sourceObj)sourceObj.value=nowSelectedValue; 12. settingValue(objId,valueString); 13. selectBoxFocus(objId); 14. if(sourceObj.onchange)sourceObj.onchange(); 15. 16. functionsettingValue(thisId,thisString) 17. varobjId=thisId; 18. varvalueString=thisString; 19. varselectedArea=document.getElementById(objId+selectBoxSelectedValue); 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. varl=0; 30. /显示下拉框中的值 31. functionviewOptionLayer(thisId,Istask,flag) 32. varobjId=thisId; 33. varselectInfo=; 34. varoptionHeight=18;/高 35. varoptionMaxNum=7;/ 36. varoptionInnerLayerHeight=; 37. varselectBoxWidth=130; 38. varselectBoxHeight=17; 39. l=userList.Rows.length; 40. varoptionLayer=document.getElementById(objId+selectBoxs); 41. if(optionLayer.innerHTML=) 42. 43. if(loptionMaxNum)optionInnerLayerHeight=height:+(optionHeight*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(vari=0;i0) 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(vari=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(i10) 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(vari=0;i 197. 198. if(document.getElementById(i+thisId).className=selectBoxOptionOver) 199. 200. selectedVal=document.getElementById(i+thisId).innerHTML; 201. varsourceObj=$(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(vari=0;il;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. functionresetStyle(thisId) 237. for(vari=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. functionhideOptionLayer(thisId) 246. varobjId=thisId; 247. varoptionLayer=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. functionsetMousePosition(thisValue) 259. varpositionValue=thisValue; 260. mousePosition=positionValue; 261. 262. functionclickMouse() 263. if(mousePosition=out)hideOptionLayer(nowOpenedSelectBox); 264. 265. functionselectBoxFocus(thisId) 266. varobjId=thisId; 267. varobj=document.getElementById(objId+selectBoxSelectedValue); 268. obj.className=selectBoxSelectedAreaFocus; 269. obj.focus(); 270. 271. functionselectBoxBlur(thisId) 272. varobjId=thisId; 273. varobj=document.getElementById(objId+selectBoxSelectedValue); 274. obj.className=selectBoxSelectedArea; 275. 276. functionhiddenOptions(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. functi