shawl.qiu javascript 表单列表框联动类 v1.2

来源：互联网发布：查看端口状态编辑：程序博客网时间：2024/05/16 12:37

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()---------------------------------//