shawl.qiu javascript 表单列表框联动类 v1.0 (支持无限级联动)
说明:
其实老早就写了几个联动的菜单, 但移植性不好...
也发现联动菜单的用处真是蛮多的, 所以就花一天时间写这个列表框类,
可以很容易的移植.
功能:
* 支持无限级联动
* 支持自定义默认选中项
* 支持自动根据 URL 查询ID 显示列表框项
联动字串格式为:
value 定界符 text 定界符分隔符
每一个 value 定界符 text 定界符对应一个 select 列表项
每一个分隔符对应一行数据库数据.
这个我不细说了, 看演示就行了, 鄙人弄了二级,三级,四级 的联动演示, 应该够清楚了.
提示:
从数据库生成字串可以使用 recordset 的 GetString() 函数.
如 ASP VBScript:
<% setrs=createObject("adodb.recordset") rs.open"selectgcid,gcat,gscid,gscatfromv_page_manage_glossary_cat",conn,1 Response.write("varstr='"&rs.GetString(2,-1,"##","##@","empty...")&"'"&chr(13)) rs.close setrs=nothing %> 数据查询串应为 id, 文本, id, 文本 格式.
目录:
1. shawl.qiu javascript 表单列表框联动类 v1.0
1.1 二级联动演示
1.2 三级联动演示
1.3 四级联动演示
2. 附 : Jscript 生成联动内容
shawl.qiu
-12-29
/btbtd
1. shawl.qiu javascript 表单列表框联动类 v1.0
1.1 二级联动演示
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <htmlxmlns="/1999/xhtml"> <head> <metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/> <title>shawl.qiutemplate</title> <scripttype="text/javascript"> //<![CDATA[ varstr='1##cat1##11##11cat##@1##cat1##12##12cat##@1##cat1##13##13cat##@2##cat2##21##21cat##@2##cat2##22##22cat##@2##cat2##23##23cat##@3##cat3##31##31cat##@3##cat3##32##32cat##@3##cat3##33##33cat##@'; onload=function(){varsle=newcFormSelect(); sle.source=str;//源字串 sle.delimiter='##';//列定界符 sle.marker='@';//行分隔符 sle.idBase='level';//标签ID标准字串,如:id1,id2.其中的id就是基准字符. sle.defaultSelect='2,21';//默认选中项,以值为准:如2,21,211.请不要带空格. sle.queryString='id,idsub';//URL栏查询串,根据URL查询ID自动选中列表框项. sle.getItem();//执行本程序 sle=null; } /*-----------------------------------------------------------------------------------*/ *shawl.qiujavascript表单列表框联动类v1.0 /*-----------------------------------------------------------------------------------*/ //---------------------------------beginclasscFormSelect()-------------------------------// functioncFormSelect(){//shawl.qiucode //------------------------------------beginpublicvariable //---------------beginabout this.auSubject='shawl.qiujavascript表单列表框联动类'; this.auVersion='1.0'; this.au='shawl.qiu'; this.auEmail='shawl.qiu@'; this.auBlog='/btbtd'; this.auCreateDate='-12-28'; //---------------endabout this.source='';//源字串 this.delimiter='#';//列定界符 this.marker='@';//行分隔符 this.idBase='level';//标签ID基准字串 this.defaultSelect='';//默认选中,格式:值,值,值... this.queryString='';//URL查询ID this.item=0; this.count=1; //------------------------------------endpublicvariable //------------------------------------beginpublicmethod this.getItem=function(){varsLcaStr=location.search; if(sLcaStr!=''){vararTemp=[]; if(tl.queryString!=''){tl.queryString.replace(/(.+?)(/,|$)/g,function($0,$1){ varre=newRegExp($1+'/=([^/&/=]+)'); sLcaStr.replace(re,function($0,$1){ arTemp[arTemp.length]=$1; }); re=null; }); tl.defaultSelect=arTemp.join(','); }//endif2 }//endif1 tl.item=fCkLevel(tl.source,tl.delimiter,tl.marker); fCreateOption(tl.source); }//endthis.getItem this.onchange=function(oSle){varnId=oSle.id.replace(tl.idBase,''); tl.count=nId; fSelectOpt(tl.count); }//endthis.onchange //------------------------------------endpublicmethod //------------------------------------beginprivatevariable vartl=this; //------------------------------------endprivatevariable //------------------------------------beginprivatemethod functionfSelectOpt(nPsti){ nPsti-=0; varsOpt=''; varsTemp='' for(vari=nPsti;i<nPsti+1;i++){try{ varn_psti=i+1; varoSle=document.getElementById(tl.idBase+n_psti); oSle.length=0; }catch(e){returnfalse;} varoSleTemp=document.getElementById(tl.idBase+nPsti); sOpt+=oSleTemp.options[oSleTemp.options.selectedIndex].value; sOpt+=tl.delimiter; sOpt+=oSleTemp.options[oSleTemp.options.selectedIndex].innerHTML; sOpt+=tl.delimiter; oSleTemp=null; varoRe=newRegExp(sOpt+'(.*?'+tl.delimiter+'.*?' +tl.delimiter+')(.*?'+tl.marker+')','gi'); tl.source.replace(oRe,function($0,$1,$2){ sTemp+=$1; return$2; }); sTemp=fStrClearRepeat(sTemp,tl.delimiter); varoRe=newRegExp('(.*?)'+tl.delimiter+'(.*?)'+tl.delimiter,'gi'); sTemp.replace(oRe, function($0,$1,$2){ if(fGoSelect(tl.item,tl.defaultSelect,$1)){ oSle.options[oSle.length]=newOption($2,$1,true,true); }elseoSle.options[oSle.length]=newOption($2,$1); }); oSle=null; }//endfor1 try{arguments.callee(nPsti+1)}catch(e){} }//endfunctionfGoSelect functionfGetOptStr(nCount,sDelimiter){ if(nCount<=1)returnfalse; varsTemp=''; for(vari=1;i<nCount;i++){varoSlePrnt=document.getElementById(tl.idBase+i); sTemp+=oSlePrnt.options[oSlePrnt.options.selectedIndex].value; sTemp+=sDelimiter; sTemp+=oSlePrnt.options[oSlePrnt.options.selectedIndex].innerHTML; sTemp+=sDelimiter; oSlePrnt=null; }//endfor returnsTemp; }//endfunctionfGetOptStr(nCount,sDelimiter) functionfCreateOption(sStr){ if(tl.count>tl.item)returnfalse; varoSle=document.getElementById(tl.idBase+tl.count); oSle.onchange=function(){tl.onchange(this); } varsText=''; varsValue=''; varsTemp=''; if(tl.count==1){varoRe=newRegExp('(.*?'+tl.delimiter+'.*?'+tl.delimiter+')(.*?'+tl.marker+')','gi'); sStr=sStr.replace(oRe,function($0,$1,$2){ sTemp+=$1; return$2; }); }else{ varsOpt=fGetOptStr(tl.count,tl.delimiter); varoRe=newRegExp(sOpt+'(.*?'+tl.delimiter+'.*?' +tl.delimiter+')(.*?'+tl.marker+')','gi'); tl.source.replace(oRe,function($0,$1,$2){ sTemp+=$1; return$2; }); }//endelse1 sTemp=fStrClearRepeat(sTemp,tl.delimiter); varoRe=newRegExp('(.*?)'+tl.delimiter+'(.*?)'+tl.delimiter,'gi'); sTemp.replace(oRe, function($0,$1,$2){ if(fGoSelect(tl.count,tl.defaultSelect,$1)){ oSle.options[oSle.length]=newOption($2,$1,true,true); }elseoSle.options[oSle.length]=newOption($2,$1); }); oSle=null; tl.count++; arguments.callee(sStr); }//endfunctionfCreateOption(sStr); functionfGoSelect(nPsti,sSle,sForCmp){ if(sSle=='')returnfalse; sSle=sSle.split(','); if(sSle[nPsti-1]==sForCmp)returntrue; returnfalse; }//endfunctionfGoSelect(nPsti,sSle,sForCmp) functionfCkLevel(sSrc,sDelimiter,sMarker){ varnum=0; varre=newRegExp('(.*?)'+sMarker); varre_=newRegExp(sDelimiter,'g'); sSrc.replace(re,function($0,$1){ $1.replace(re_,function(m){ num++; }); }); returnnum/2; }//endfCkLevel(sSrc,sDelimiter,sMarker); functionfStrClearRepeat(sStr,sDelimiter){ variStr=''; varre=newRegExp('.*?'+sDelimiter+'.*?'+sDelimiter,'gi'); sStr=sStr.replace(re,function(m){ if(iStr.indexOf(m)==-1) iStr+=m; return''; }); returniStr;//shawl.qiucode }//endfunctionfStrClearRepeat(sStr,sDelimiter); //------------------------------------endprivatemethod }//shawl.qiucode //---------------------------------endclasscFormSelect()---------------------------------// //]]> </script> </head> <body> <selectname='super'id='level1'></select> <selectname='sub'id='level2'></select> <br/><ahref="?">back</a><br/> <ahref="?id=1&idsub=12">id=1&idsub=12</a><br/> <ahref="?id=2&idsub=21">id=2&idsub=21</a><br/> <ahref="?id=3&idsub=32">id=3&idsub=32</a><br/> </body> </html> 1.2 三级联动演示 <!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <htmlxmlns="/1999/xhtml"> <head> <metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/> <title>shawl.qiutemplate</title> <scripttype="text/javascript"> //<![CDATA[ varstr='1##cat1##11##11cat##111##111cat##@1##cat1##11##11cat##112##112cat##@1##cat1##11##11cat##113##113cat##@1##cat1##12##12cat##121##121cat##@1##cat1##12##12cat##122##122cat##@1##cat1##12##12cat##123##123cat##@1##cat1##13##13cat##131##131cat##@1##cat1##13##13cat##132##132cat##@1##cat1##13##13cat##133##133cat##@2##cat2##21##21cat##211##211cat##@2##cat2##21##21cat##212##212cat##@2##cat2##21##21cat##213##213cat##@2##cat2##22##22cat##221##221cat##@2##cat2##22##22cat##222##222cat##@2##cat2##22##22cat##223##223cat##@2##cat2##23##23cat##231##231cat##@2##cat2##23##23cat##232##232cat##@2##cat2##23##23cat##233##233cat##@3##cat3##31##31cat##311##311cat##@3##cat3##31##31cat##312##312cat##@3##cat3##31##31cat##313##313cat##@3##cat3##32##32cat##321##321cat##@3##cat3##32##32cat##322##322cat##@3##cat3##32##32cat##323##323cat##@3##cat3##33##33cat##331##331cat##@3##cat3##33##33cat##332##332cat##@3##cat3##33##33cat##333##333cat##@'; onload=function(){varsle=newcFormSelect(); sle.source=str;//源字串 sle.delimiter='##';//列定界符 sle.marker='@';//行分隔符 sle.idBase='level';//标签ID标准字串,如:id1,id2.其中的id就是基准字符. sle.defaultSelect='2,21,211';//默认选中项,以值为准:如2,21,211.请不要带空格. sle.queryString='id,idsub,idsub1';//URL栏查询串,根据URL查询ID自动选中列表框项. sle.getItem();//执行本程序 sle=null; } /*-----------------------------------------------------------------------------------*/ *shawl.qiujavascript表单列表框联动类v1.0 /*-----------------------------------------------------------------------------------*/ //---------------------------------beginclasscFormSelect()-------------------------------// functioncFormSelect(){//shawl.qiucode //------------------------------------beginpublicvariable //---------------beginabout this.auSubject='shawl.qiujavascript表单列表框联动类'; this.auVersion='1.0'; this.au='shawl.qiu'; this.auEmail='shawl.qiu@'; this.auBlog='/btbtd'; this.auCreateDate='-12-28'; //---------------endabout this.source='';//源字串 this.delimiter='#';//列定界符 this.marker='@';//行分隔符 this.idBase='level';//标签ID基准字串 this.defaultSelect='';//默认选中,格式:值,值,值... this.queryString='';//URL查询ID this.item=0; this.count=1; //------------------------------------endpublicvariable //------------------------------------beginpublicmethod this.getItem=function(){varsLcaStr=location.search; if(sLcaStr!=''){vararTemp=[]; if(tl.queryString!=''){tl.queryString.replace(/(.+?)(/,|$)/g,function($0,$1){ varre=newRegExp($1+'/=([^/&/=]+)'); sLcaStr.replace(re,function($0,$1){ arTemp[arTemp.length]=$1; }); re=null; }); tl.defaultSelect=arTemp.join(','); }//endif2 }//endif1 tl.item=fCkLevel(tl.source,tl.delimiter,tl.marker); fCreateOption(tl.source); }//endthis.getItem this.onchange=function(oSle){varnId=oSle.id.replace(tl.idBase,''); tl.count=nId; fSelectOpt(tl.count); }//endthis.onchange //------------------------------------endpublicmethod //------------------------------------beginprivatevariable vartl=this; //------------------------------------endprivatevariable //------------------------------------beginprivatemethod functionfSelectOpt(nPsti){ nPsti-=0; varsOpt=''; varsTemp='' for(vari=nPsti;i<nPsti+1;i++){try{ varn_psti=i+1; varoSle=document.getElementById(tl.idBase+n_psti); oSle.length=0; }catch(e){returnfalse;} varoSleTemp=document.getElementById(tl.idBase+nPsti); sOpt+=oSleTemp.options[oSleTemp.options.selectedIndex].value; sOpt+=tl.delimiter; sOpt+=oSleTemp.options[oSleTemp.options.selectedIndex].innerHTML; sOpt+=tl.delimiter; oSleTemp=null; varoRe=newRegExp(sOpt+'(.*?'+tl.delimiter+'.*?' +tl.delimiter+')(.*?'+tl.marker+')','gi'); tl.source.replace(oRe,function($0,$1,$2){ sTemp+=$1; return$2; }); sTemp=fStrClearRepeat(sTemp,tl.delimiter); varoRe=newRegExp('(.*?)'+tl.delimiter+'(.*?)'+tl.delimiter,'gi'); sTemp.replace(oRe, function($0,$1,$2){ if(fGoSelect(tl.item,tl.defaultSelect,$1)){ oSle.options[oSle.length]=newOption($2,$1,true,true); }elseoSle.options[oSle.length]=newOption($2,$1); }); oSle=null; }//endfor1 try{arguments.callee(nPsti+1)}catch(e){} }//endfunctionfGoSelect functionfGetOptStr(nCount,sDelimiter){ if(nCount<=1)returnfalse; varsTemp=''; for(vari=1;i<nCount;i++){varoSlePrnt=document.getElementById(tl.idBase+i); sTemp+=oSlePrnt.options[oSlePrnt.options.selectedIndex].value; sTemp+=sDelimiter; sTemp+=oSlePrnt.options[oSlePrnt.options.selectedIndex].innerHTML; sTemp+=sDelimiter; oSlePrnt=null; }//endfor returnsTemp; }//endfunctionfGetOptStr(nCount,sDelimiter) functionfCreateOption(sStr){ if(tl.count>tl.item)returnfalse; varoSle=document.getElementById(tl.idBase+tl.count); oSle.onchange=function(){tl.onchange(this); } varsText=''; varsValue=''; varsTemp=''; if(tl.count==1){varoRe=newRegExp('(.*?'+tl.delimiter+'.*?'+tl.delimiter+')(.*?'+tl.marker+')','gi'); sStr=sStr.replace(oRe,function($0,$1,$2){ sTemp+=$1; return$2; }); }else{ varsOpt=fGetOptStr(tl.count,tl.delimiter); varoRe=newRegExp(sOpt+'(.*?'+tl.delimiter+'.*?' +tl.delimiter+')(.*?'+tl.marker+')','gi'); tl.source.replace(oRe,function($0,$1,$2){ sTemp+=$1; return$2; }); }//endelse1 sTemp=fStrClearRepeat(sTemp,tl.delimiter); varoRe=newRegExp('(.*?)'+tl.delimiter+'(.*?)'+tl.delimiter,'gi'); sTemp.replace(oRe, function($0,$1,$2){ if(fGoSelect(tl.count,tl.defaultSelect,$1)){ oSle.options[oSle.length]=newOption($2,$1,true,true); }elseoSle.options[oSle.length]=newOption($2,$1); }); oSle=null; tl.count++; arguments.callee(sStr); }//endfunctionfCreateOption(sStr); functionfGoSelect(nPsti,sSle,sForCmp){ if(sSle=='')returnfalse; sSle=sSle.split(','); if(sSle[nPsti-1]==sForCmp)returntrue; returnfalse; }//endfunctionfGoSelect(nPsti,sSle,sForCmp) functionfCkLevel(sSrc,sDelimiter,sMarker){ varnum=0; varre=newRegExp('(.*?)'+sMarker); varre_=newRegExp(sDelimiter,'g'); sSrc.replace(re,function($0,$1){ $1.replace(re_,function(m){ num++; }); }); returnnum/2; }//endfCkLevel(sSrc,sDelimiter,sMarker); functionfStrClearRepeat(sStr,sDelimiter){ variStr=''; varre=newRegExp('.*?'+sDelimiter+'.*?'+sDelimiter,'gi'); sStr=sStr.replace(re,function(m){ if(iStr.indexOf(m)==-1) iStr+=m; return''; }); returniStr;//shawl.qiucode }//endfunctionfStrClearRepeat(sStr,sDelimiter); //------------------------------------endprivatemethod }//shawl.qiucode //---------------------------------endclasscFormSelect()---------------------------------// //]]> </script> </head> <body> <selectname='super'id='level1'></select> <selectname='sub'id='level2'></select> <selectname='sub1'id='level3'></select> <br/><ahref="?">back</a><br/> <ahref="?id=1&idsub=13&idsub1=132">?id=1&idsub=13&idsub1=132</a><br/> <ahref="?id=2&idsub=22&idsub1=223">?id=2&idsub=22&idsub1=223</a><br/> <ahref="?id=3&idsub=31&idsub1=312">?id=3&idsub=31&idsub1=312</a><br/> </body> </html> 1.3 四级联动演示 <!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <htmlxmlns="/1999/xhtml"> <head> <metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/> <title>shawl.qiutemplate</title> <scripttype="text/javascript"> //<![CDATA[ varstr='1##cat1##11##11cat##111##111cat##1111##1111cat##@1##cat1##11##11cat##111##111cat##1112##1112cat##@1##cat1##11##11cat##111##111cat##1113##1113cat##@1##cat1##11##11cat##112##112cat##1121##1121cat##@1##cat1##11##11cat##112##112cat##1122##1122cat##@1##cat1##11##11cat##112##112cat##1123##1123cat##@1##cat1##11##11cat##113##113cat##1131##1131cat##@1##cat1##11##11cat##113##113cat##1132##1132cat##@1##cat1##11##11cat##113##113cat##1133##1133cat##@1##cat1##12##12cat##121##121cat##1211##1211cat##@1##cat1##12##12cat##121##121cat##1212##1212cat##@1##cat1##12##12cat##121##121cat##1213##1213cat##@1##cat1##12##12cat##122##122cat##1221##1221cat##@1##cat1##12##12cat##122##122cat##1222##1222cat##@1##cat1##12##12cat##122##122cat##1223##1223cat##@1##cat1##12##12cat##123##123cat##1231##1231cat##@1##cat1##12##12cat##123##123cat##1232##1232cat##@1##cat1##12##12cat##123##123cat##1233##1233cat##@1##cat1##13##13cat##131##131cat##1311##1311cat##@1##cat1##13##13cat##131##131cat##1312##1312cat##@1##cat1##13##13cat##131##131cat##1313##1313cat##@1##cat1##13##13cat##132##132cat##1321##1321cat##@1##cat1##13##13cat##132##132cat##1322##1322cat##@1##cat1##13##13cat##132##132cat##1323##1323cat##@1##cat1##13##13cat##133##133cat##1331##1331cat##@1##cat1##13##13cat##133##133cat##1332##1332cat##@1##cat1##13##13cat##133##133cat##1333##1333cat##@2##cat2##21##21cat##211##211cat##2111##2111cat##@2##cat2##21##21cat##211##211cat##2112##2112cat##@2##cat2##21##21cat##211##211cat##2113##2113cat##@2##cat2##21##21cat##212##212cat##2121##2121cat##@2##cat2##21##21cat##212##212cat##2122##2122cat##@2##cat2##21##21cat##212##212cat##2123##2123cat##@2##cat2##21##21cat##213##213cat##2131##2131cat##@2##cat2##21##21cat##213##213cat##2132##2132cat##@2##cat2##21##21cat##213##213cat##2133##2133cat##@2##cat2##22##22cat##221##221cat##2211##2211cat##@2##cat2##22##22cat##221##221cat##2212##2212cat##@2##cat2##22##22cat##221##221cat##2213##2213cat##@2##cat2##22##22cat##222##222cat##2221##2221cat##@2##cat2##22##22cat##222##222cat##2222##2222cat##@2##cat2##22##22cat##222##222cat##2223##2223cat##@2##cat2##22##22cat##223##223cat##2231##2231cat##@2##cat2##22##22cat##223##223cat##2232##2232cat##@2##cat2##22##22cat##223##223cat##2233##2233cat##@2##cat2##23##23cat##231##231cat##2311##2311cat##@2##cat2##23##23cat##231##231cat##2312##2312cat##@2##cat2##23##23cat##231##231cat##2313##2313cat##@2##cat2##23##23cat##232##232cat##2321##2321cat##@2##cat2##23##23cat##232##232cat##2322##2322cat##@2##cat2##23##23cat##232##232cat##2323##2323cat##@2##cat2##23##23cat##233##233cat##2331##2331cat##@2##cat2##23##23cat##233##233cat##2332##2332cat##@2##cat2##23##23cat##233##233cat##2333##2333cat##@3##cat3##31##31cat##311##311cat##3111##3111cat##@3##cat3##31##31cat##311##311cat##3112##3112cat##@3##cat3##31##31cat##311##311cat##3113##3113cat##@3##cat3##31##31cat##312##312cat##3121##3121cat##@3##cat3##31##31cat##312##312cat##3122##3122cat##@3##cat3##31##31cat##312##312cat##3123##3123cat##@3##cat3##31##31cat##313##313cat##3131##3131cat##@3##cat3##31##31cat##313##313cat##3132##3132cat##@3##cat3##31##31cat##313##313cat##3133##3133cat##@3##cat3##32##32cat##321##321cat##3211##3211cat##@3##cat3##32##32cat##321##321cat##3212##3212cat##@3##cat3##32##32cat##321##321cat##3213##3213cat##@3##cat3##32##32cat##322##322cat##3221##3221cat##@3##cat3##32##32cat##322##322cat##3222##3222cat##@3##cat3##32##32cat##322##322cat##3223##3223cat##@3##cat3##32##32cat##323##323cat##3231##3231cat##@3##cat3##32##32cat##323##323cat##3232##3232cat##@3##cat3##32##32cat##323##323cat##3233##3233cat##@3##cat3##33##33cat##331##331cat##3311##3311cat##@3##cat3##33##33cat##331##331cat##3312##3312cat##@3##cat3##33##33cat##331##331cat##3313##3313cat##@3##cat3##33##33cat##332##332cat##3321##3321cat##@3##cat3##33##33cat##332##332cat##3322##3322cat##@3##cat3##33##33cat##332##332cat##3323##3323cat##@3##cat3##33##33cat##333##333cat##3331##3331cat##@3##cat3##33##33cat##333##333cat##3332##3332cat##@3##cat3##33##33cat##333##333cat##3333##3333cat##@'; onload=function(){varsle=newcFormSelect(); sle.source=str;//源字串 sle.delimiter='##';//列定界符 sle.marker='@';//行分隔符 sle.idBase='level';//标签ID标准字串,如:id1,id2.其中的id就是基准字符. sle.defaultSelect='3,31,313,3131';//默认选中项,以值为准:如2,21,211.请不要带空格. sle.queryString='id,idsub,idsub1,idsub2';//URL栏查询串,根据URL查询ID自动选中列表框项. sle.getItem();//执行本程序 sle=null; } /*-----------------------------------------------------------------------------------*/ *shawl.qiujavascript表单列表框联动类v1.0 /*-----------------------------------------------------------------------------------*/ //---------------------------------beginclasscFormSelect()-------------------------------// functioncFormSelect(){//shawl.qiucode //------------------------------------beginpublicvariable //---------------beginabout this.auSubject='shawl.qiujavascript表单列表框联动类'; this.auVersion='1.0'; this.au='shawl.qiu'; this.auEmail='shawl.qiu@'; this.auBlog='/btbtd'; this.auCreateDate='-12-28'; //---------------endabout this.source='';//源字串 this.delimiter='#';//列定界符 this.marker='@';//行分隔符 this.idBase='level';//标签ID基准字串 this.defaultSelect='';//默认选中,格式:值,值,值... this.queryString='';//URL查询ID this.item=0; this.count=1; //------------------------------------endpublicvariable //------------------------------------beginpublicmethod this.getItem=function(){varsLcaStr=location.search; if(sLcaStr!=''){vararTemp=[]; if(tl.queryString!=''){tl.queryString.replace(/(.+?)(/,|$)/g,function($0,$1){ varre=newRegExp($1+'/=([^/&/=]+)'); sLcaStr.replace(re,function($0,$1){ arTemp[arTemp.length]=$1; }); re=null; }); tl.defaultSelect=arTemp.join(','); }//endif2 }//endif1 tl.item=fCkLevel(tl.source,tl.delimiter,tl.marker); fCreateOption(tl.source); }//endthis.getItem this.onchange=function(oSle){varnId=oSle.id.replace(tl.idBase,''); tl.count=nId; fSelectOpt(tl.count); }//endthis.onchange //------------------------------------endpublicmethod //------------------------------------beginprivatevariable vartl=this; //------------------------------------endprivatevariable //------------------------------------beginprivatemethod functionfSelectOpt(nPsti){ nPsti-=0; varsOpt=''; varsTemp='' for(vari=nPsti;i<nPsti+1;i++){try{ varn_psti=i+1; varoSle=document.getElementById(tl.idBase+n_psti); oSle.length=0; }catch(e){returnfalse;} varoSleTemp=document.getElementById(tl.idBase+nPsti); sOpt+=oSleTemp.options[oSleTemp.options.selectedIndex].value; sOpt+=tl.delimiter; sOpt+=oSleTemp.options[oSleTemp.options.selectedIndex].innerHTML; sOpt+=tl.delimiter; oSleTemp=null; varoRe=newRegExp(sOpt+'(.*?'+tl.delimiter+'.*?' +tl.delimiter+')(.*?'+tl.marker+')','gi'); tl.source.replace(oRe,function($0,$1,$2){ sTemp+=$1; return$2; }); sTemp=fStrClearRepeat(sTemp,tl.delimiter); varoRe=newRegExp('(.*?)'+tl.delimiter+'(.*?)'+tl.delimiter,'gi'); sTemp.replace(oRe, function($0,$1,$2){ if(fGoSelect(tl.item,tl.defaultSelect,$1)){ oSle.options[oSle.length]=newOption($2,$1,true,true); }elseoSle.options[oSle.length]=newOption($2,$1); }); oSle=null; }//endfor1 try{arguments.callee(nPsti+1)}catch(e){} }//endfunctionfGoSelect functionfGetOptStr(nCount,sDelimiter){ if(nCount<=1)returnfalse; varsTemp=''; for(vari=1;i<nCount;i++){varoSlePrnt=document.getElementById(tl.idBase+i); sTemp+=oSlePrnt.options[oSlePrnt.options.selectedIndex].value; sTemp+=sDelimiter; sTemp+=oSlePrnt.options[oSlePrnt.options.selectedIndex].innerHTML; sTemp+=sDelimiter; oSlePrnt=null; }//endfor returnsTemp; }//endfunctionfGetOptStr(nCount,sDelimiter) functionfCreateOption(sStr){ if(tl.count>tl.item)returnfalse; varoSle=document.getElementById(tl.idBase+tl.count); oSle.onchange=function(){tl.onchange(this); } varsText=''; varsValue=''; varsTemp=''; if(tl.count==1){varoRe=newRegExp('(.*?'+tl.delimiter+'.*?'+tl.delimiter+')(.*?'+tl.marker+')','gi'); sStr=sStr.replace(oRe,function($0,$1,$2){ sTemp+=$1; return$2; }); }else{ varsOpt=fGetOptStr(tl.count,tl.delimiter); varoRe=newRegExp(sOpt+'(.*?'+tl.delimiter+'.*?' +tl.delimiter+')(.*?'+tl.marker+')','gi'); tl.source.replace(oRe,function($0,$1,$2){ sTemp+=$1; return$2; }); }//endelse1 sTemp=fStrClearRepeat(sTemp,tl.delimiter); varoRe=newRegExp('(.*?)'+tl.delimiter+'(.*?)'+tl.delimiter,'gi'); sTemp.replace(oRe, function($0,$1,$2){ if(fGoSelect(tl.count,tl.defaultSelect,$1)){ oSle.options[oSle.length]=newOption($2,$1,true,true); }elseoSle.options[oSle.length]=newOption($2,$1); }); oSle=null; tl.count++; arguments.callee(sStr); }//endfunctionfCreateOption(sStr); functionfGoSelect(nPsti,sSle,sForCmp){ if(sSle=='')returnfalse; sSle=sSle.split(','); if(sSle[nPsti-1]==sForCmp)returntrue; returnfalse; }//endfunctionfGoSelect(nPsti,sSle,sForCmp) functionfCkLevel(sSrc,sDelimiter,sMarker){ varnum=0; varre=newRegExp('(.*?)'+sMarker); varre_=newRegExp(sDelimiter,'g'); sSrc.replace(re,function($0,$1){ $1.replace(re_,function(m){ num++; }); }); returnnum/2; }//endfCkLevel(sSrc,sDelimiter,sMarker); functionfStrClearRepeat(sStr,sDelimiter){ variStr=''; varre=newRegExp('.*?'+sDelimiter+'.*?'+sDelimiter,'gi'); sStr=sStr.replace(re,function(m){ if(iStr.indexOf(m)==-1) iStr+=m; return''; }); returniStr;//shawl.qiucode }//endfunctionfStrClearRepeat(sStr,sDelimiter); //------------------------------------endprivatemethod }//shawl.qiucode //---------------------------------endclasscFormSelect()---------------------------------// //]]> </script> </head> <body> <selectname='super'id='level1'></select> <selectname='sub'id='level2'></select> <selectname='sub1'id='level3'></select> <selectname='sub2'id='level4'></select> <br/><ahref="?">back</a><br/> <ahref="?id=1&idsub=13&idsub1=132&idsub2=1321">?id=1&idsub=13&idsub1=132&idsub2=1321</a><br/> <ahref="?id=2&idsub=22&idsub1=223&idsub2=2232">?id=2&idsub=22&idsub1=223&idsub2=2232</a><br/> <ahref="?id=3&idsub=31&idsub1=313&idsub2=3133">?id=3&idsub=31&idsub1=313&idsub2=3133</a><br/> </body> </html> 2. 附: Jscript 生成联动内容 <%@LANGUAGE="JAVASCRIPT"CODEPAGE="65001"%> <!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <htmlxmlns="/1999/xhtml"> <head> <metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/> <title>shawl.qiutemplate</title> </head> <body> <% varstr='cat' varsDelimiter='##'; varsMarker='@'; variStr=''; /* for(vari=1;i<=3;i++){for(varj=1;j<=3;j++){iStr+=i+sDelimiter+str+i+sDelimiter+ i+j+sDelimiter+i+j+str+sDelimiter+ sMarker; }//endfor2 }//endfor1 */ /* for(vari=1;i<=3;i++){for(varj=1;j<=3;j++){for(vark=1;k<=3;k++){iStr+=i+sDelimiter+str+i+sDelimiter+ i+j+sDelimiter+i+j+str+sDelimiter+ i+j+k+sDelimiter+i+j+k+str+sDelimiter+ sMarker; }//endfor3 }//endfor2 }//endfor1 */ for(vari=1;i<=3;i++){for(varj=1;j<=3;j++){for(vark=1;k<=3;k++){for(varl=1;l<=3;l++){iStr+=i+sDelimiter+str+i+sDelimiter+ i+j+sDelimiter+i+j+str+sDelimiter+ i+j+k+sDelimiter+i+j+k+str+sDelimiter+ i+j+k+l+sDelimiter+i+j+k+l+str+sDelimiter+ sMarker+'<br>'; }//endfor4 }//endfor3 }//endfor2 }//endfor1 Response.write(iStr); %> </body> </html>
