Advanced Search

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

Expand | Embed | Plain Text

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.