Create an unlimited drop-down-list box with javascript only


/ Published in: JavaScript
Save to your folder(s)

Create an unlimited drop-down-list box with javascript only
save selected status with cookie
create html select objects and select item object with javascript


Copy this code and paste it in your HTML
  1. /*************************************************************************
  2. * @name: DropList
  3. * @author: BOSSMA
  4. * @version: 1.1
  5. * @date: 2010-01-27
  6. * @description: 一个可以更快制作无限级下拉列表的Javascript程序
  7. * @website: http://www.bossma.cn
  8. * @copyright: 本程序遵守LGPL开源协议
  9. **************************************************************************/
  10.  
  11. /*****************************************************
  12. 用来定义下拉列表中的选择项:DropSelectItem
  13. 参数:
  14. text:选择项的文本
  15. parentvalue:上级值
  16. value:选择项的值
  17. selected: 是否选中
  18. 返回值:DropSelectItem对象
  19. *****************************************************/
  20. function DropSelectItem(text,value,parentValue,isSelected){
  21. this.text=text;
  22. this.parentValue=parentValue;
  23. this.value=value;
  24. this.selected=isSelected;
  25. };
  26.  
  27. /*****************************************************
  28. 用来定义下拉列表:DropSelect
  29. 参数:
  30. name:下拉列表的Name属性
  31. id:下拉列表的ID属性
  32. tip:选择提示,例如:-请选择-
  33. 返回值:DropSelect对象
  34.  ****************************************************/
  35. function DropSelect(name,id,tip){
  36. this.name=name;
  37. this.id=id;
  38. this.tip=tip;
  39. };
  40.  
  41. /*****************************************************
  42. 用来定义:DropList
  43. 参数:
  44. objName:对象名称 字符
  45. topparent: 最顶级下拉列表的上级值
  46. iscookie: 是否使用cookie
  47. 返回值:DropList对象
  48. ******************************************************/
  49. function DropList(objId,topParentValue,isCookie){
  50. this.id=objId;
  51. this.dropSelectItems=[];
  52. this.dropSelect=[];
  53. this.topParentValue=topParentValue;
  54. this.useCookie=(isCookie==null)?true:isCookie;
  55. };
  56.  
  57. /*****************************************************
  58. 用于添加下拉列表:AddSelect
  59. 参数:
  60. name:下拉列表的Name属性
  61. id:下拉列表的ID属性
  62. tip:选择提示,例如:-请选择-
  63. 返回值:无
  64. *****************************************************/
  65. DropList.prototype.AddSelect = function(name,id,tip){
  66. this.dropSelect[this.dropSelect.length] = new DropSelect(name,id,tip);
  67. };
  68.  
  69. /*****************************************************
  70. 用于添加下拉列表的选择项:AddSelectItem
  71. 参数:
  72. text:显示文本
  73. value:值
  74. parentValue:上级值
  75. isSelected:是否选中项
  76. 返回值:无
  77. ******************************************************/
  78. DropList.prototype.AddSelectItem = function(text,value,parentValue,isSelected){
  79. this.dropSelectItems[this.dropSelectItems.length] = new DropSelectItem(text,parentValue,value,isSelected);
  80. };
  81.  
  82. /*****************************************************
  83. 用于添加下拉列表的选择项:InitControl
  84. 参数:
  85. text:显示文本
  86. value:值
  87. parentValue:上级值
  88. isSelected:是否选中项
  89. 返回值:无 或 false
  90.  *****************************************************/
  91. DropList.prototype.InitControl = function(){
  92. if(this.dropSelect.length<=0){//没有添加下拉列表
  93. return false;
  94. }
  95.  
  96. this.InitSelect(null,this.topParentValue);//初始化填充下拉列表
  97. };
  98.  
  99. /*****************************************************
  100. 设置Select选项,并设置选中项,选中项Cookie优先:InitSelect
  101. 参数:
  102. nowDropSelect: 当前要设置的选择项
  103. parentValue:上级值,最上级不能为空,否则会出现问题
  104. 返回值:无
  105. ******************************************************/
  106. DropList.prototype.InitSelect = function(nowDropSelect,parentValue){
  107.  
  108. if(nowDropSelect==null){//如果当前下拉列表ID为空,则为第一个
  109. nowDropSelect=this.dropSelect[0];
  110. }
  111.  
  112. document.write("<select id='"+nowDropSelect.id+"' name='"+nowDropSelect.name+"' onChange=javascript:eval(\""+this.id+".ChangeSelect('"+nowDropSelect.id+"');\")></select>");//输出下拉列表
  113.  
  114. var curDropSelect = document.getElementById(nowDropSelect.id);//初始化下拉列表
  115. curDropSelect.length = 0;
  116.  
  117. if(curDropSelect.tip!=""){//如果有选择提示,则显示出来
  118. curDropSelect.options[curDropSelect.length] = new Option(nowDropSelect.tip,'');
  119. }
  120.  
  121. if(parentValue!=""){//上级值不为空
  122. for(i=0;i<this.dropSelectItems.length; i++){//循环填充下拉列表
  123. if (this.dropSelectItems[i].parentValue == parentValue){
  124. curDropSelect.options[curDropSelect.length] = new Option(this.dropSelectItems[i].text, this.dropSelectItems[i].value);
  125.  
  126. if(this.dropSelectItems[i].selected){//设置选中项
  127. curDropSelect.value = this.dropSelectItems[i].value;
  128. }
  129. }
  130. }
  131.  
  132. if(this.useCookie){//如果使用Cookie,则设置Cookie中保存的选中项
  133. var cookieSelectValue=this.GetSelect(nowDropSelect.id);
  134. if(cookieSelectValue!=null&&cookieSelectValue!=''){
  135. curDropSelect.value = cookieSelectValue;
  136. }
  137. }
  138. }
  139.  
  140. var nextDropSelectItem=this.NextDropSelect(nowDropSelect);
  141. if(nextDropSelectItem!=null){//递归下一级下拉列表的选择项目
  142. this.InitSelect(nextDropSelectItem,curDropSelect.value);
  143. }
  144. };
  145.  
  146. /*****************************************************
  147. 变换选择项时填充下级:ChangeSelect
  148. 参数:
  149. nowDropSelect: 当前要设置的选择项
  150. parentValue:上级值
  151. 返回值:无
  152. ******************************************************/
  153. DropList.prototype.ChangeSelect = function(nowDropSelectId){
  154.  
  155. var nowDropSelect = document.getElementById(nowDropSelectId);//当前Html中下拉列表
  156. var nowDropSelectValue=nowDropSelect.options[nowDropSelect.selectedIndex].value;//当前下拉列表的值
  157.  
  158. if(this.useCookie){//如果使用Cookie,将值设置到Cookie
  159. var cookiename = this.id + nowDropSelectId;
  160. this.setCookie(cookiename,nowDropSelectValue);
  161. }
  162.  
  163. var nextDropSelectItem = this.NextDropSelectById(nowDropSelectId);
  164.  
  165. if(nextDropSelectItem!=null){//如果不是最后一个下拉列表
  166. var nextDropSelect = document.getElementById(nextDropSelectItem.id);//获取html中的下拉列表
  167. nextDropSelect.length = 0;//初始长度
  168. nextDropSelect.options[0] = new Option(nextDropSelectItem.tip,'');//设置下拉选择提示
  169.  
  170. for(var i=0;i<this.dropSelectItems.length; i++){
  171. if (this.dropSelectItems[i].parentValue == nowDropSelectValue){
  172. nextDropSelect.options[nextDropSelect.length] = new Option(this.dropSelectItems[i].text, this.dropSelectItems[i].value);
  173. }
  174. }
  175.  
  176. this.ChangeSelect(nextDropSelect.id);
  177. }
  178. };
  179.  
  180. //从Cookie中获取当前select的选择项
  181. DropList.prototype.GetSelect= function(nowid) {
  182. var sn = this.getCookie(this.id+nowid);
  183. return (sn) ? sn : null;
  184. };
  185.  
  186. //设置Cookie
  187. DropList.prototype.setCookie = function(cookieName, cookieValue, expires, path, domain, secure) {
  188.  
  189. document.cookie =
  190. escape(cookieName) + '=' + escape(cookieValue)
  191. + (expires ? '; expires=' + expires.toGMTString() : '')
  192. + (path ? '; path=' + path : '')
  193. + (domain ? '; domain=' + domain : '')
  194. + (secure ? '; secure' : '');
  195. };
  196.  
  197. //获取Cookie
  198. DropList.prototype.getCookie = function(cookieName) {
  199.  
  200. var cookieValue = '';
  201. var posName = document.cookie.indexOf(escape(cookieName) + '=');
  202. if (posName != -1) {
  203. var posValue = posName + (escape(cookieName) + '=').length;
  204. var endPos = document.cookie.indexOf(';', posValue);
  205. if (endPos != -1) cookieValue = unescape(document.cookie.substring(posValue, endPos));
  206. else cookieValue = unescape(document.cookie.substring(posValue));
  207. }
  208. return (cookieValue);
  209. };
  210.  
  211. /*****************************************************
  212. 通过当前下拉列表获取下一个下拉列表:NextDropSelect
  213. 参数:
  214. nowDropSelect: 当前的的下拉列表
  215. 返回值:下拉列表
  216. ******************************************************/
  217. DropList.prototype.NextDropSelect = function(nowDropSelect){
  218.  
  219. for(var j=0;j<this.dropSelect.length;j++){
  220. if(this.dropSelect[j]==nowDropSelect){
  221. if(j+1<this.dropSelect.length){
  222. return this.dropSelect[j+1];
  223. }
  224. }
  225. }
  226. return null;
  227. };
  228.  
  229. /*****************************************************
  230. 通过当前下拉列表ID获取下一个下拉列表对象:NextDropSelectById
  231. 参数:
  232. nowDropSelectId: 当前的的下拉列表的Id
  233. 返回值:下拉列表
  234. ******************************************************/
  235. DropList.prototype.NextDropSelectById = function(nowDropSelectId){
  236.  
  237. for(var j=0;j<this.dropSelect.length;j++){
  238. if(this.dropSelect[j].id==nowDropSelectId){
  239. if(j+1<this.dropSelect.length){
  240. return this.dropSelect[j+1];
  241. }
  242. }
  243. }
  244. return null;
  245. };

URL: http://blog.bossma.cn/?p=113

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.