shawl.qiu javascript 表单列表框联动类 v1.2
说明:
本次升级主要为增加两个功能, 可以自定义一个项, 和是否显示附加项...
1.1 版本没发布, 主要为除虫.
1.2 版本基本上没虫.
文章相关信息:
主题: shawl.qiu javascript 表单列表框联动类 v1.2
发表者: sq
电子邮件: shawl.qiu@gmail.com
QQ: 557091
MSN: shawl.qiu@gmail.com
Blog: http://blog.csdn.net/btbtd
发表日期: 2007-1-12 22:01:25
来源引用: shawl.qiu asp/jscript 个人源代码管理系统
目录:
1. 使用手册
2. select() 类源码
1. 使用手册
- shawl.qiu framework javascript client-side
- ---/------------------------------------------------------------------------------
- 三级联动 -> 添加自定义项
- var sle=new select();
- sle.source=document.getElementById('catAllStr').innerHTML; // 源字串
- sle.delimiter='##'; // 列定界符
- sle.marker='@'; // 行分隔符
- sle.addition=true;
- sle.custom='请选择:all';
- sle.idBase='level'; // 标签 ID 基准字串, 如: id1, id2. 其中的 id 就是基准字符.
- sle.defaultSelect='all,all,all'; // 默认选中项, 以值为准: 如 2,21,211. 请不要带空格.
- sle.queryString='cat1id,cat2id,cat3id'; // URL 栏查询串, 根据 URL 查询 ID 自动选中列表框项.
- sle.getItem(); // 执行本程序
- sle=null;
- ---/------------------------------------------------------------------------------
- 三级联动 -> 添加附加项
- var sle=new select();
- sle.source=document.getElementById('catAllStr').innerHTML; // 源字串
- sle.delimiter='##'; // 列定界符
- sle.marker='@'; // 行分隔符
- sle.addition=true;
- sle.idBase='level'; // 标签 ID 基准字串, 如: id1, id2. 其中的 id 就是基准字符.
- sle.defaultSelect='1,1,0'; // 默认选中项, 以值为准: 如 2,21,211. 请不要带空格.
- sle.queryString='cat1id,cat2id,cat3id'; // URL 栏查询串, 根据 URL 查询 ID 自动选中列表框项.
- sle.getItem(); // 执行本程序
- sle=null;
- }
- ---/------------------------------------------------------------------------------
- 三级联动
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- <html xmlns="http://www.w3.org/1999/xhtml">
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
- <title>shawl.qiu template</title>
- <script type='text/javascript' src='/sqFwJsCs/default.js'></script>
- <script type="text/javascript">
- //<![CDATA[
- /*--------------------------begin sqFwJsCs--------------------------------*/
- //shawl.qiu framework javascript client-side
- /*----------------global--------------------*/
- //im.help.self(true);
- //im.help.source(true);
- //-
- //im.readme();
- //-
- //im.find('default.js',true);
- //im.find(null,true);
- /*----------------object--------------------*/
- //im.go('object.default');
- //im.help('object.default', true);
- //-
- /*----------------string--------------------*/
- //im.go('string.default');
- //im.help('string.default', true);
- //-
- //im.go('string.format');
- //im.help('string.format', true);
- //-
- //im.go('string.random');
- //im.help('string.random', true);
- //-
- //im.go('string.highlight');
- //im.help('string.highlight', true);
- //im.help('string.highlight');
- //-
- /*----------------check---------------------*/
- //im.go('check.default');
- //im.help('check.default', true);
- //-
- /*----------------array---------------------*/
- //im.go('array.default');
- //im.help('array.default', true);
- //-
- /*----------------dom---------------------*/
- //im.go('dom.keywords');
- //im.help('dom.keywords', true);
- //-
- //im.go('dom.default');
- //im.help('dom.default', true);
- /*----------------image---------------------*/
- //im.go('image.default');
- //im.help('image.default', true);
- //-
- /*----------------form---------------------*/
- //im.go('form.default');
- //im.help('form.default', true);
- //-
- im.go('form.select');
- //im.help('form.select', true)
- //-
- //im.go('form.validate');
- //im.help('form.validate', true);
- /*----------------utility---------------------*/
- //im.go('utility.default');
- //im.help('utility.default', true);
- //-
- /*----------------multi options-------------*/
- //im.go('string.default|string.random');
- //-
- //im.help('string.default|string.random', true);
- /*--------------------------end sqFwJsCs----------------------------------*/
- //]]>
- </script>
- </script>
- <script type="text/javascript">
- //<![CDATA[
- var str='1##默认类##1##测试类 cat2##1##测试类 cat3##@<br/>';
- onload=function(){
- var sle=new select();
- 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;
- }
- //]]>
- </script>
- </head>
- <body>
- <select name='cat1' id='level1'></select>
- <select name='cat2' id='level2'></select>
- <select name='cat3' id='level3'></select>
- </body>
- </html>
- ---/------------------------------------------------------------------------------
- 二级联动
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- <html xmlns="http://www.w3.org/1999/xhtml">
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
- <title>shawl.qiu template</title>
- <script type='text/javascript' src='/sqFwJsCs/default.js'></script>
- <script type="text/javascript">
- im.go('form.select');
- im.help('form.select', true);
- //]]>
- </script>
- <script type="text/javascript">
- //<![CDATA[
- var str='1##cat 1##11##11cat ##@1##cat 1##12##12cat ##@1##cat 1##13##13cat ##@2##cat 2##21##21cat ##@2##cat 2##22##22cat ##@2##cat 2##23##23cat ##@3##cat 3##31##31cat ##@3##cat 3##32##32cat ##@3##cat 3##33##33cat ##@';
- onload=function(){
- var sle=new select();
- 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;
- }
- //]]>
- </script>
- </head>
- <body>
- <select name='super' id='level1'></select>
- <select name='sub' id='level2'></select>
- <br/><a href="?">back</a><br/>
- <a href="?id=1&idsub=12">id=1&idsub=12</a><br/>
- <a href="?id=2&idsub=21">id=2&idsub=21</a><br/>
- <a href="?id=3&idsub=32">id=3&idsub=32</a><br/>
- </body>
- </html>
2. select() 类源码
- /*
- onload=function(){
- var sle=new select();
- 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.qiu javascript 表单列表框联动类 v1.2
- /*-----------------------------------------------------------------------------------*/
- //---------------------------------begin class select()-------------------------------//
- function select(){ // shawl.qiu code
- //------------------------------------begin public variable
- //---------------begin about
- this.auSubject='shawl.qiu javascript 表单列表框联动类';
- this.auVersion='1.2';
- this.au='shawl.qiu';
- this.auEmail='shawl.qiu@gmail.com';
- this.auBlog='http://blog.csdn.net/btbtd';
- this.auCreateDate='2006-12-28';
- this.auUpdate='2006-1-12';
- //---------------end about
- this.source=''; // 源字串
- this.delimiter='#'; // 列定界符
- this.marker='@'; // 行分隔符
- this.idBase='level'; // 标签 ID 基准字串
- this.defaultSelect=''; // 默认选中, 格式: 值,值,值...
- this.queryString=''; // URL 查询ID
- this.addition=false; // 添加值为零的项;
- this.custom='';
- this.item=0;
- this.count=1;
- this.word=function(){};
- this.word.addition='默认值';
- this.word.value=0;
- //------------------------------------end public variable
- //------------------------------------begin public method
- this.getItem=function(){
- var sLcaStr=location.search;
- if(sLcaStr!=''){
- var arTemp=[];
- if(tl.queryString!=''){
- tl.queryString.replace(/(.+?)(/,|$)/g,function($0,$1){
- var re=new RegExp($1+'/=([^/&/=]+)');
- sLcaStr.replace(re,function($0,$1){
- arTemp[arTemp.length]=$1;
- });
- re=null;
- });
- tl.defaultSelect=arTemp.join(',');
- } // end if 2
- } // end if 1
- tl.item=fCkLevel(tl.source, tl.delimiter, tl.marker);
- fCreateOption(tl.source);
- } // end this.getItem
- this.onchange=function(oSle){
- var nId=oSle.id.replace(tl.idBase,'');
- tl.count=nId;
- fSelectOpt(tl.count);
- } // end this.onchange
- //------------------------------------end public method
- //------------------------------------begin private variable
- var tl=this;
- //------------------------------------end private variable
- //------------------------------------begin private method
- function fSelectOpt(nPsti){
- nPsti-=0;
- var sOpt='';
- var sTemp=''
- for(var i=nPsti; i<nPsti+1; i++){
- try{
- var n_psti=i+1;
- var oSle=document.getElementById(tl.idBase+n_psti);
- oSle.length=0;
- } catch(e){return false; }
- var oSleTemp=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;
- var oRe=new RegExp(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);
- var oRe=new RegExp('(.*?)'+tl.delimiter+'(.*?)'+tl.delimiter, 'gi');
- if(tl.custom!=''){
- var arCst=tl.custom.split(':');
- oSle.options[oSle.length]=new Option(arCst[0], arCst[1]);
- }
- if(tl.addition){
- oSle.options[oSle.length]=new Option(tl.word.addition, tl.word.value);
- }
- sTemp.replace(oRe,
- function($0, $1, $2){
- if(fGoSelect(tl.item, tl.defaultSelect, $1)){
- oSle.options[oSle.length]=new Option($2, $1, true, true);
- } else oSle.options[oSle.length]=new Option($2, $1);
- });
- oSle=null;
- } // end for 1
- try{ arguments.callee(nPsti+1) } catch(e){}
- } // end function fGoSelect
- function fGoSelect(nPsti, sSle, sForCmp){
- if(sSle=='')return false;
- sSle=sSle.split(',');
- if(sSle[nPsti-1]==sForCmp) return true;
- return false;
- } // end function fGoSelect(nPsti, sSle, sForCmp)
- function fGetOptStr(nCount, sDelimiter){
- if(nCount<=1)return false;
- var sTemp='';
- for(var i=1; i<nCount; i++){
- var oSlePrnt=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;
- } // end for
- return sTemp;
- } // end function fGetOptStr(nCount, sDelimiter)
- function fCreateOption(sStr){
- if(tl.count>tl.item)return false;
- var oSle=document.getElementById(tl.idBase+tl.count);
- oSle.onchange=function(){
- tl.onchange(this);
- }
- var sText='';
- var sValue='';
- var sTemp='';
- if(tl.count==1){
- var oRe=new RegExp('(.*?'+tl.delimiter+'.*?'+tl.delimiter+')(.*?'+tl.marker+')','gi');
- sStr=sStr.replace(oRe, function($0, $1, $2){
- sTemp+=$1;
- return $2;
- });
- } else {
- var sOpt=fGetOptStr(tl.count, tl.delimiter);
- var oRe=new RegExp(sOpt+'(.*?'+tl.delimiter+'.*?'
- +tl.delimiter+')(.*?'+tl.marker+')','gi');
- tl.source.replace(oRe, function($0, $1, $2){
- sTemp+=$1;
- return $2;
- });
- } //end else 1
- sTemp=fStrClearRepeat(sTemp, tl.delimiter);
- var oRe=new RegExp('(.*?)'+tl.delimiter+'(.*?)'+tl.delimiter, 'gi');
- if(tl.custom!=''){
- var arCst=tl.custom.split(':');
- oSle.options[oSle.length]=new Option(arCst[0], arCst[1]);
- }
- if(!tl.count-0===1){
- oSle.options[oSle.length]=new Option('请选择类别', 0);
- }
- sTemp.replace(oRe,
- function($0, $1, $2){
- if(fGoSelect(tl.count, tl.defaultSelect, $1)){
- oSle.options[oSle.length]=new Option($2, $1, true, true);
- } else oSle.options[oSle.length]=new Option($2, $1);
- });
- if(tl.addition){
- if(tl.count>1){
- var iTemp=tl.defaultSelect.split(',');
- if(iTemp[tl.count-1]-0===0){
- oSle.options[oSle.length]=new Option(tl.word.addition, tl.word.value, true, true);
- } else {
- oSle.options[oSle.length]=new Option(tl.word.addition, tl.word.value);
- } // end if 3
- } // end if 2
- } // end if 1
- oSle=null;
- tl.count++;
- arguments.callee(sStr);
- } // end function fCreateOption(sStr);
- function fCkLevel(sSrc, sDelimiter,sMarker){
- var num=0;
- var re=new RegExp('(.*?)'+sMarker);
- var re_=new RegExp(sDelimiter, 'g');
- sSrc.replace(re,function($0,$1){
- $1.replace(re_, function(m){
- num++;
- });
- });
- return num/2;
- } // end fCkLevel(sSrc, sDelimiter,sMarker);
- function fStrClearRepeat(sStr, sDelimiter){
- var iStr='';
- var re=new RegExp('.*?'+sDelimiter+'.*?'+sDelimiter, 'gi');
- sStr=sStr.replace(re,function(m){
- if(iStr.indexOf(m)==-1)
- iStr+=m;
- return '';
- });
- return iStr; // shawl.qiu code
- } // end function fStrClearRepeat(sStr, sDelimiter);
- //------------------------------------end private method
- } // shawl.qiu code
- //---------------------------------end class select()---------------------------------//