龙盟编程博客 | 无障碍搜索 | 云盘搜索神器
快速搜索
主页 > web编程 > Javascript编程 >

浅析用JavaScript实现select所支持的功能

时间:2013-03-06 14:58来源:未知 作者:admin 点击: 次
分享到：
在进行JavaScript实现select所支持的功能实现时，首先需要了解一些标识的定义，比如true-这个是控制单击时出现下拉框体的标识等等。 调用时可以这样： 1，tempStr=GetNewSelectStr(dataTable.va

在进行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).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. function settingValue(thisId,thisString) {   
  17. var objId = thisId;   
  18. var valueString = thisString;   
  19. var selectedArea = 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. 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:"+ (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 (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.display = "";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){   
  293. userList=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. }  
  1. JSON是什么？为JavaScript准备的数据格式
  2. 十个最常用的JavaScript自定义函数
  3. 有关JavaScript事件加载的一些延伸思考
  4. JavaScript使用心得汇总：从BOM和DOM谈起
  5. ExtJS在Android模拟器上的运行效果
精彩图集
node+express+ejs制作简单页面上手指南_node.js
node+express+
js点亮星星评分并获取参数的js代码
js点亮星星评
鼠标滑过出现预览的大图提示效果
鼠标滑过出
查找Oracle高消耗语句的方法
查找Oracle高
PHP开发者必须掌握的6个关键字
PHP开发者必

热门标签

数据库重命名 查询结果 缅甸 sqlserverdri 快速查找 乐观锁 email检测 创建圆形饼图 统计重复的值 poi读取ppt文件 gdb 编译python Client 五个步骤 数字 zip()函数 DocTypes 文件结构 word宏 last_insert_ proftpd WScript.Shel get方式提交 PASSWORD 矩阵乘法 禁止用户登 根目录 删除数据库 跟老齐学Python 嵌套 竖排 js操作table virustotal 转列 PHP模块 提供 通俗易懂 知乎 jquery.nocon Iisftp.vbs 弱引用 保留IP地址 PHP PHP输出指 pathinfo indexOf PHP PHP数组相关 缩小 sort函数 运行时 第一个 NFS服务配置 20位 opacity 右端 sqlldr adb连 单点登陆 head comparator 操作本地数据

赞助商链接