/ Published in: JavaScript

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
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
/************************************************************************* * @name: DropList * @author: BOSSMA * @version: 1.1 * @date: 2010-01-27 * @description: 一个å¯ä»¥æ›´å¿«åˆ¶ä½œæ— é™çº§ä¸‹æ‹‰åˆ—表的Javascriptç¨‹åº * @website: http://www.bossma.cn * @copyright: 本程åºéµå®ˆLGPLå¼€æºåè®® **************************************************************************/ /***************************************************** 用æ¥å®šä¹‰ä¸‹æ‹‰åˆ—表ä¸çš„选择项:DropSelectItem 傿•°ï¼š text:选择项的文本 parentvalue:上级值 value:选择项的值 selected: 是å¦é€‰ä¸ 返回值:DropSelectItem对象 *****************************************************/ function DropSelectItem(text,value,parentValue,isSelected){ this.text=text; this.parentValue=parentValue; this.value=value; this.selected=isSelected; }; /***************************************************** 用æ¥å®šä¹‰ä¸‹æ‹‰åˆ—表:DropSelect 傿•°ï¼š name:下拉列表的Name属性 id:下拉列表的ID属性 tip:选择æç¤ºï¼Œä¾‹å¦‚:-请选择- 返回值:DropSelect对象 ****************************************************/ function DropSelect(name,id,tip){ this.name=name; this.id=id; this.tip=tip; }; /***************************************************** 用æ¥å®šä¹‰ï¼šDropList 傿•°ï¼š objName:对象åç§° å—符 topparent: 最顶级下拉列表的上级值 iscookie: 是å¦ä½¿ç”¨cookie 返回值:DropList对象 ******************************************************/ function DropList(objId,topParentValue,isCookie){ this.id=objId; this.dropSelectItems=[]; this.dropSelect=[]; this.topParentValue=topParentValue; this.useCookie=(isCookie==null)?true:isCookie; }; /***************************************************** ç”¨äºŽæ·»åŠ ä¸‹æ‹‰åˆ—è¡¨:AddSelect 傿•°ï¼š name:下拉列表的Name属性 id:下拉列表的ID属性 tip:选择æç¤ºï¼Œä¾‹å¦‚:-请选择- è¿”å›žå€¼ï¼šæ— *****************************************************/ DropList.prototype.AddSelect = function(name,id,tip){ this.dropSelect[this.dropSelect.length] = new DropSelect(name,id,tip); }; /***************************************************** ç”¨äºŽæ·»åŠ ä¸‹æ‹‰åˆ—è¡¨çš„é€‰æ‹©é¡¹:AddSelectItem 傿•°ï¼š text:显示文本 value:值 parentValue:上级值 isSelected:是å¦é€‰ä¸é¡¹ è¿”å›žå€¼ï¼šæ— ******************************************************/ DropList.prototype.AddSelectItem = function(text,value,parentValue,isSelected){ this.dropSelectItems[this.dropSelectItems.length] = new DropSelectItem(text,parentValue,value,isSelected); }; /***************************************************** ç”¨äºŽæ·»åŠ ä¸‹æ‹‰åˆ—è¡¨çš„é€‰æ‹©é¡¹:InitControl 傿•°ï¼š text:显示文本 value:值 parentValue:上级值 isSelected:是å¦é€‰ä¸é¡¹ è¿”å›žå€¼ï¼šæ— æˆ– false *****************************************************/ DropList.prototype.InitControl = function(){ if(this.dropSelect.length<=0){//æ²¡æœ‰æ·»åŠ ä¸‹æ‹‰åˆ—è¡¨ return false; } this.InitSelect(null,this.topParentValue);//åˆå§‹åŒ–填充下拉列表 }; /***************************************************** 设置Select选项,并设置选ä¸é¡¹ï¼Œé€‰ä¸é¡¹Cookie优先:InitSelect 傿•°ï¼š nowDropSelect: 当å‰è¦è®¾ç½®çš„选择项 parentValue:上级值,最上级ä¸èƒ½ä¸ºç©ºï¼Œå¦åˆ™ä¼šå‡ºçŽ°é—®é¢˜ è¿”å›žå€¼ï¼šæ— ******************************************************/ DropList.prototype.InitSelect = function(nowDropSelect,parentValue){ if(nowDropSelect==null){//如果当å‰ä¸‹æ‹‰åˆ—表ID为空,则为第一个 nowDropSelect=this.dropSelect[0]; } document.write("<select id='"+nowDropSelect.id+"' name='"+nowDropSelect.name+"' onChange=javascript:eval(\""+this.id+".ChangeSelect('"+nowDropSelect.id+"');\")></select>");//输出下拉列表 var curDropSelect = document.getElementById(nowDropSelect.id);//åˆå§‹åŒ–下拉列表 curDropSelect.length = 0; if(curDropSelect.tip!=""){//如果有选择æç¤ºï¼Œåˆ™æ˜¾ç¤ºå‡ºæ¥ curDropSelect.options[curDropSelect.length] = new Option(nowDropSelect.tip,''); } if(parentValue!=""){//上级值ä¸ä¸ºç©º for(i=0;i<this.dropSelectItems.length; i++){//循环填充下拉列表 if (this.dropSelectItems[i].parentValue == parentValue){ curDropSelect.options[curDropSelect.length] = new Option(this.dropSelectItems[i].text, this.dropSelectItems[i].value); if(this.dropSelectItems[i].selected){//设置选ä¸é¡¹ curDropSelect.value = this.dropSelectItems[i].value; } } } if(this.useCookie){//如果使用Cookie,则设置Cookieä¸ä¿å˜çš„选ä¸é¡¹ var cookieSelectValue=this.GetSelect(nowDropSelect.id); if(cookieSelectValue!=null&&cookieSelectValue!=''){ curDropSelect.value = cookieSelectValue; } } } var nextDropSelectItem=this.NextDropSelect(nowDropSelect); if(nextDropSelectItem!=null){//递归下一级下拉列表的选择项目 this.InitSelect(nextDropSelectItem,curDropSelect.value); } }; /***************************************************** å˜æ¢é€‰æ‹©é¡¹æ—¶å¡«å……下级:ChangeSelect 傿•°ï¼š nowDropSelect: 当å‰è¦è®¾ç½®çš„选择项 parentValue:上级值 è¿”å›žå€¼ï¼šæ— ******************************************************/ DropList.prototype.ChangeSelect = function(nowDropSelectId){ var nowDropSelect = document.getElementById(nowDropSelectId);//当å‰Htmlä¸ä¸‹æ‹‰åˆ—表 var nowDropSelectValue=nowDropSelect.options[nowDropSelect.selectedIndex].value;//当å‰ä¸‹æ‹‰åˆ—表的值 if(this.useCookie){//如果使用Cookie,将值设置到Cookie var cookiename = this.id + nowDropSelectId; this.setCookie(cookiename,nowDropSelectValue); } var nextDropSelectItem = this.NextDropSelectById(nowDropSelectId); if(nextDropSelectItem!=null){//å¦‚æžœä¸æ˜¯æœ€åŽä¸€ä¸ªä¸‹æ‹‰åˆ—表 var nextDropSelect = document.getElementById(nextDropSelectItem.id);//获å–htmlä¸çš„下拉列表 nextDropSelect.length = 0;//åˆå§‹é•¿åº¦ nextDropSelect.options[0] = new Option(nextDropSelectItem.tip,'');//设置下拉选择æç¤º for(var i=0;i<this.dropSelectItems.length; i++){ if (this.dropSelectItems[i].parentValue == nowDropSelectValue){ nextDropSelect.options[nextDropSelect.length] = new Option(this.dropSelectItems[i].text, this.dropSelectItems[i].value); } } this.ChangeSelect(nextDropSelect.id); } }; //从Cookieä¸èŽ·å–当å‰select的选择项 DropList.prototype.GetSelect= function(nowid) { var sn = this.getCookie(this.id+nowid); return (sn) ? sn : null; }; //设置Cookie DropList.prototype.setCookie = function(cookieName, cookieValue, expires, path, domain, secure) { document.cookie = escape(cookieName) + '=' + escape(cookieValue) + (expires ? '; expires=' + expires.toGMTString() : '') + (path ? '; path=' + path : '') + (domain ? '; domain=' + domain : '') + (secure ? '; secure' : ''); }; //获å–Cookie DropList.prototype.getCookie = function(cookieName) { var cookieValue = ''; var posName = document.cookie.indexOf(escape(cookieName) + '='); if (posName != -1) { var posValue = posName + (escape(cookieName) + '=').length; var endPos = document.cookie.indexOf(';', posValue); if (endPos != -1) cookieValue = unescape(document.cookie.substring(posValue, endPos)); else cookieValue = unescape(document.cookie.substring(posValue)); } return (cookieValue); }; /***************************************************** 通过当å‰ä¸‹æ‹‰åˆ—表获å–下一个下拉列表:NextDropSelect 傿•°ï¼š nowDropSelect: 当å‰çš„的下拉列表 返回值:下拉列表 ******************************************************/ DropList.prototype.NextDropSelect = function(nowDropSelect){ for(var j=0;j<this.dropSelect.length;j++){ if(this.dropSelect[j]==nowDropSelect){ if(j+1<this.dropSelect.length){ return this.dropSelect[j+1]; } } } return null; }; /***************************************************** 通过当å‰ä¸‹æ‹‰åˆ—表ID获å–下一个下拉列表对象:NextDropSelectById 傿•°ï¼š nowDropSelectId: 当å‰çš„的下拉列表的Id 返回值:下拉列表 ******************************************************/ DropList.prototype.NextDropSelectById = function(nowDropSelectId){ for(var j=0;j<this.dropSelect.length;j++){ if(this.dropSelect[j].id==nowDropSelectId){ if(j+1<this.dropSelect.length){ return this.dropSelect[j+1]; } } } return null; };
URL: http://blog.bossma.cn/?p=113
Comments
