shawl.qiu javascript 表单列表框联动类 v1.0 (支持无限级联动)

最新推荐文章于 2024-07-08 16:22:29 发布
最新推荐文章于 2024-07-08 16:22:29 发布
阅读量3k 收藏
点赞数
文章标签： javascript function null url vbscript 数据库
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/btbtd/article/details/1468163
版权

shawl.qiu javascript 表单列表框联动类 v1.0  (支持无限级联动)

 说明:
 其实老早就写了几个联动的菜单, 但移植性不好...
 也发现联动菜单的用处真是蛮多的, 所以就花一天时间写这个列表框类,
 可以很容易的移植.
 
 功能:
 * 支持无限级联动
 * 支持自定义默认选中项
 * 支持自动根据 URL 查询ID 显示列表框项
 
 联动字串格式为:
 value 定界符 text 定界符 分隔符
 每一个 value 定界符 text 定界符  对应一个 select 列表项
 每一个分隔符对应一行数据库数据.
 这个我不细说了, 看演示就行了, 鄙人弄了二级,三级,四级 的联动演示, 应该够清楚了.

提示: 
从数据库生成字串可以使用 recordset 的 GetString() 函数.
如 ASP VBScript:

  1. <%
  2.  set rs=createObject("adodb.recordset")
  3.   rs.open "select gcid, gcat, gscid, gscat from v_page_manage_glossary_cat",conn, 1
  4.   Response.write("var str='"&rs.GetString(2,-1,"##","##@","empty...")&"'"&chr(13))
  5.   rs.close
  6.  set rs=nothing
  7. %>
 数据查询串应为 id, 文本, id, 文本 格式.

 

 目录:
 1. shawl.qiu javascript 表单列表框联动类 v1.0
 1.1 二级联动演示
 1.2 三级联动演示
 1.3 四级联动演示
 
 2. 附 : Jscript 生成联动内容
 
 shawl.qiu
 2006-12-29
 http://blog.csdn.net/btbtd

 1. shawl.qiu javascript 表单列表框联动类 v1.0
 1.1 二级联动演示

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>shawl.qiu template</title>
  6. <script type="text/javascript">
  7. //<![CDATA[
  8.   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 ##@';
  9.    onload=function(){
  10.    var sle=new cFormSelect();
  11.      sle.source=str;                    // 源字串
  12.    sle.delimiter='##';                 // 列定界符
  13.    sle.marker='@';                    // 行分隔符
  14.    sle.idBase='level';                // 标签 ID 标准字串, 如: id1, id2. 其中的 id 就是基准字符.
  15.    sle.defaultSelect='2,21';      // 默认选中项, 以值为准: 如 2,21,211. 请不要带空格.
  16.    sle.queryString='id,idsub'; // URL 栏查询串, 根据 URL 查询 ID 自动选中列表框项.
  17.       sle.getItem(); // 执行本程序
  18.       sle=null;
  19.  }
  20.  /*-----------------------------------------------------------------------------------*/
  21.   * shawl.qiu javascript 表单列表框联动类 v1.0
  22.  /*-----------------------------------------------------------------------------------*/
  23.  //---------------------------------begin class cFormSelect()-------------------------------//
  24.  function cFormSelect(){ // shawl.qiu code
  25.   //------------------------------------begin public variable
  26.   //---------------begin about
  27.   this.auSubject='shawl.qiu javascript 表单列表框联动类';
  28.   this.auVersion='1.0';
  29.   this.au='shawl.qiu';
  30.   this.auEmail='shawl.qiu@gmail.com';
  31.   this.auBlog='http://blog.csdn.net/btbtd';
  32.   this.auCreateDate='2006-12-28';
  33.   //---------------end about
  34.   this.source='';          // 源字串
  35.   this.delimiter='#';      // 列定界符
  36.   this.marker='@';         // 行分隔符
  37.   this.idBase='level';     // 标签 ID 基准字串 
  38.   this.defaultSelect='';   // 默认选中, 格式: 值,值,值...
  39.   this.queryString='';     // URL 查询ID
  40.     this.item=0;
  41.   this.count=1;
  42.   //------------------------------------end public variable
  43.     //------------------------------------begin public method
  44.   this.getItem=function(){
  45.    var sLcaStr=location.search;
  46.    if(sLcaStr!=''){
  47.     var arTemp=[];
  48.     if(tl.queryString!=''){
  49.      tl.queryString.replace(/(.+?)(/,|$)/g,function($0,$1){
  50.       var re=new RegExp($1+'/=([^/&/=]+)');
  51.        sLcaStr.replace(re,function($0,$1){
  52.         arTemp[arTemp.length]=$1;
  53.        });
  54.        re=null;
  55.      });
  56.      tl.defaultSelect=arTemp.join(',');
  57.     } // end if 2
  58.    } // end if 1
  59.       tl.item=fCkLevel(tl.source, tl.delimiter, tl.marker);
  60.    fCreateOption(tl.source);
  61.   } // end this.getItem
  62.     this.onchange=function(oSle){
  63.    var nId=oSle.id.replace(tl.idBase,'');
  64.     tl.count=nId;
  65.     fSelectOpt(tl.count);
  66.   } // end this.onchange
  67.   //------------------------------------end public method
  68.     //------------------------------------begin private variable
  69.   var tl=this;
  70.   //------------------------------------end private variable
  71.     //------------------------------------begin private method
  72.     function fSelectOpt(nPsti){
  73.    nPsti-=0;
  74.    var sOpt='';
  75.    var sTemp=''
  76.    for(var i=nPsti; i<nPsti+1; i++){
  77.     try{
  78.      var n_psti=i+1;
  79.      var oSle=document.getElementById(tl.idBase+n_psti);
  80.      oSle.length=0;
  81.     } catch(e){return false; }
  82.      var oSleTemp=document.getElementById(tl.idBase+nPsti);
  83.       sOpt+=oSleTemp.options[oSleTemp.options.selectedIndex].value;
  84.       sOpt+=tl.delimiter;
  85.       sOpt+=oSleTemp.options[oSleTemp.options.selectedIndex].innerHTML;
  86.       sOpt+=tl.delimiter;
  87.       oSleTemp=null;
  88.            var oRe=new RegExp(sOpt+'(.*?'+tl.delimiter+'.*?'
  89.       +tl.delimiter+')(.*?'+tl.marker+')','gi');
  90.             tl.source.replace(oRe, function($0, $1, $2){
  91.        sTemp+=$1;
  92.        return $2;
  93.      });
  94.            sTemp=fStrClearRepeat(sTemp, tl.delimiter);
  95.      var oRe=new RegExp('(.*?)'+tl.delimiter+'(.*?)'+tl.delimiter, 'gi');
  96.      sTemp.replace(oRe,
  97.       function($0, $1, $2){
  98.        if(fGoSelect(tl.item, tl.defaultSelect, $1)){
  99.         oSle.options[oSle.length]=new Option($2, $1, true, true);
  100.        } else oSle.options[oSle.length]=new Option($2, $1);
  101.      });
  102.            oSle=null;
  103.    } // end for 1
  104.    try{ arguments.callee(nPsti+1) } catch(e){}
  105.   } // end function fGoSelect
  106.     function fGetOptStr(nCount, sDelimiter){
  107.    if(nCount<=1)return false;
  108.    var sTemp='';
  109.    for(var i=1; i<nCount; i++){
  110.     var oSlePrnt=document.getElementById(tl.idBase+i);
  111.      sTemp+=oSlePrnt.options[oSlePrnt.options.selectedIndex].value;
  112.      sTemp+=sDelimiter;
  113.      sTemp+=oSlePrnt.options[oSlePrnt.options.selectedIndex].innerHTML;
  114.      sTemp+=sDelimiter;
  115.      oSlePrnt=null;
  116.    } // end for
  117.    return sTemp;
  118.   } // end function fGetOptStr(nCount, sDelimiter)
  119.     function fCreateOption(sStr){
  120.    if(tl.count>tl.item)return false;
  121.       var oSle=document.getElementById(tl.idBase+tl.count);
  122.     oSle.onchange=function(){
  123.      tl.onchange(this);
  124.     }
  125.    var sText='';
  126.    var sValue='';
  127.    var sTemp='';
  128.    if(tl.count==1){
  129.     var oRe=new RegExp('(.*?'+tl.delimiter+'.*?'+tl.delimiter+')(.*?'+tl.marker+')','gi');
  130.     sStr=sStr.replace(oRe, function($0, $1, $2){
  131.       sTemp+=$1;
  132.       return $2;
  133.     });
  134.    } else {
  135.     var sOpt=fGetOptStr(tl.count, tl.delimiter);
  136.     var oRe=new RegExp(sOpt+'(.*?'+tl.delimiter+'.*?'
  137.      +tl.delimiter+')(.*?'+tl.marker+')','gi');
  138.           tl.source.replace(oRe, function($0, $1, $2){
  139.       sTemp+=$1;
  140.       return $2;
  141.     });
  142.    } //end else 1
  143.       sTemp=fStrClearRepeat(sTemp, tl.delimiter);
  144.       var oRe=new RegExp('(.*?)'+tl.delimiter+'(.*?)'+tl.delimiter, 'gi');
  145.       sTemp.replace(oRe,
  146.     function($0, $1, $2){
  147.      if(fGoSelect(tl.count, tl.defaultSelect, $1)){
  148.       oSle.options[oSle.length]=new Option($2, $1, true, true);
  149.      } else oSle.options[oSle.length]=new Option($2, $1);
  150.    });
  151.        oSle=null;
  152.       tl.count++;
  153.    arguments.callee(sStr);
  154.   } // end function fCreateOption(sStr);
  155.     function fGoSelect(nPsti, sSle, sForCmp){
  156.    if(sSle=='')return false;
  157.    sSle=sSle.split(',');
  158.    if(sSle[nPsti-1]==sForCmp) return true;
  159.    return false;
  160.   } // end function fGoSelect(nPsti, sSle, sForCmp)
  161.     function fCkLevel(sSrc, sDelimiter,sMarker){
  162.    var num=0;
  163.    var re=new RegExp('(.*?)'+sMarker);
  164.    var re_=new RegExp(sDelimiter, 'g');
  165.       sSrc.replace(re,function($0,$1){
  166.     $1.replace(re_, function(m){
  167.      num++;
  168.     });
  169.    });
  170.    return num/2;
  171.   } // end fCkLevel(sSrc, sDelimiter,sMarker);
  172.     function fStrClearRepeat(sStr, sDelimiter){
  173.    var iStr='';
  174.    var re=new RegExp('.*?'+sDelimiter+'.*?'+sDelimiter, 'gi');
  175.       sStr=sStr.replace(re,function(m){
  176.     if(iStr.indexOf(m)==-1)
  177.     iStr+=m;
  178.     return '';
  179.    });
  180.    return iStr; // shawl.qiu code
  181.   } // end function fStrClearRepeat(sStr, sDelimiter);
  182.   //------------------------------------end private method
  183.  } // shawl.qiu code
  184.  //---------------------------------end class cFormSelect()---------------------------------//
  185. //]]>
  186. </script>
  187. </head>
  188. <body>
  189. <select name='super' id='level1'></select>
  190. <select name='sub' id='level2'></select>
  191. <br/><a href="?">back</a><br/>
  192. <a href="?id=1&idsub=12">id=1&idsub=12</a><br/>
  193. <a href="?id=2&idsub=21">id=2&idsub=21</a><br/>
  194. <a href="?id=3&idsub=32">id=3&idsub=32</a><br/>
  195. </body>
  196. </html>
 1.2 三级联动演示
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>shawl.qiu template</title>
  6. <script type="text/javascript">
  7. //<![CDATA[
  8.   var str='1##cat 1##11##11cat ##111##111cat ##@1##cat 1##11##11cat ##112##112cat ##@1##cat 1##11##11cat ##113##113cat ##@1##cat 1##12##12cat ##121##121cat ##@1##cat 1##12##12cat ##122##122cat ##@1##cat 1##12##12cat ##123##123cat ##@1##cat 1##13##13cat ##131##131cat ##@1##cat 1##13##13cat ##132##132cat ##@1##cat 1##13##13cat ##133##133cat ##@2##cat 2##21##21cat ##211##211cat ##@2##cat 2##21##21cat ##212##212cat ##@2##cat 2##21##21cat ##213##213cat ##@2##cat 2##22##22cat ##221##221cat ##@2##cat 2##22##22cat ##222##222cat ##@2##cat 2##22##22cat ##223##223cat ##@2##cat 2##23##23cat ##231##231cat ##@2##cat 2##23##23cat ##232##232cat ##@2##cat 2##23##23cat ##233##233cat ##@3##cat 3##31##31cat ##311##311cat ##@3##cat 3##31##31cat ##312##312cat ##@3##cat 3##31##31cat ##313##313cat ##@3##cat 3##32##32cat ##321##321cat ##@3##cat 3##32##32cat ##322##322cat ##@3##cat 3##32##32cat ##323##323cat ##@3##cat 3##33##33cat ##331##331cat ##@3##cat 3##33##33cat ##332##332cat ##@3##cat 3##33##33cat ##333##333cat ##@';
  9.    onload=function(){
  10.    var sle=new cFormSelect();
  11.      sle.source=str;                    // 源字串
  12.    sle.delimiter='##';                 // 列定界符
  13.    sle.marker='@';                    // 行分隔符
  14.    sle.idBase='level';                // 标签 ID 标准字串, 如: id1, id2. 其中的 id 就是基准字符.
  15.    sle.defaultSelect='2,21,211';      // 默认选中项, 以值为准: 如 2,21,211. 请不要带空格.
  16.    sle.queryString='id,idsub,idsub1'; // URL 栏查询串, 根据 URL 查询 ID 自动选中列表框项.
  17.       sle.getItem(); // 执行本程序
  18.       sle=null;
  19.  }
  20.  /*-----------------------------------------------------------------------------------*/
  21.   * shawl.qiu javascript 表单列表框联动类 v1.0
  22.  /*-----------------------------------------------------------------------------------*/
  23.  //---------------------------------begin class cFormSelect()-------------------------------//
  24.  function cFormSelect(){ // shawl.qiu code
  25.   //------------------------------------begin public variable
  26.   //---------------begin about
  27.   this.auSubject='shawl.qiu javascript 表单列表框联动类';
  28.   this.auVersion='1.0';
  29.   this.au='shawl.qiu';
  30.   this.auEmail='shawl.qiu@gmail.com';
  31.   this.auBlog='http://blog.csdn.net/btbtd';
  32.   this.auCreateDate='2006-12-28';
  33.   //---------------end about
  34.   this.source='';          // 源字串
  35.   this.delimiter='#';      // 列定界符
  36.   this.marker='@';         // 行分隔符
  37.   this.idBase='level';     // 标签 ID 基准字串 
  38.   this.defaultSelect='';   // 默认选中, 格式: 值,值,值...
  39.   this.queryString='';     // URL 查询ID
  40.     this.item=0;
  41.   this.count=1;
  42.   //------------------------------------end public variable
  43.     //------------------------------------begin public method
  44.   this.getItem=function(){
  45.    var sLcaStr=location.search;
  46.    if(sLcaStr!=''){
  47.     var arTemp=[];
  48.     if(tl.queryString!=''){
  49.      tl.queryString.replace(/(.+?)(/,|$)/g,function($0,$1){
  50.       var re=new RegExp($1+'/=([^/&/=]+)');
  51.        sLcaStr.replace(re,function($0,$1){
  52.         arTemp[arTemp.length]=$1;
  53.        });
  54.        re=null;
  55.      });
  56.      tl.defaultSelect=arTemp.join(',');
  57.     } // end if 2
  58.    } // end if 1
  59.       tl.item=fCkLevel(tl.source, tl.delimiter, tl.marker);
  60.    fCreateOption(tl.source);
  61.   } // end this.getItem
  62.     this.onchange=function(oSle){
  63.    var nId=oSle.id.replace(tl.idBase,'');
  64.     tl.count=nId;
  65.     fSelectOpt(tl.count);
  66.   } // end this.onchange
  67.   //------------------------------------end public method
  68.     //------------------------------------begin private variable
  69.   var tl=this;
  70.   //------------------------------------end private variable
  71.     //------------------------------------begin private method
  72.     function fSelectOpt(nPsti){
  73.    nPsti-=0;
  74.    var sOpt='';
  75.    var sTemp=''
  76.    for(var i=nPsti; i<nPsti+1; i++){
  77.     try{
  78.      var n_psti=i+1;
  79.      var oSle=document.getElementById(tl.idBase+n_psti);
  80.      oSle.length=0;
  81.     } catch(e){return false; }
  82.      var oSleTemp=document.getElementById(tl.idBase+nPsti);
  83.       sOpt+=oSleTemp.options[oSleTemp.options.selectedIndex].value;
  84.       sOpt+=tl.delimiter;
  85.       sOpt+=oSleTemp.options[oSleTemp.options.selectedIndex].innerHTML;
  86.       sOpt+=tl.delimiter;
  87.       oSleTemp=null;
  88.            var oRe=new RegExp(sOpt+'(.*?'+tl.delimiter+'.*?'
  89.       +tl.delimiter+')(.*?'+tl.marker+')','gi');
  90.             tl.source.replace(oRe, function($0, $1, $2){
  91.        sTemp+=$1;
  92.        return $2;
  93.      });
  94.            sTemp=fStrClearRepeat(sTemp, tl.delimiter);
  95.      var oRe=new RegExp('(.*?)'+tl.delimiter+'(.*?)'+tl.delimiter, 'gi');
  96.      sTemp.replace(oRe,
  97.       function($0, $1, $2){
  98.        if(fGoSelect(tl.item, tl.defaultSelect, $1)){
  99.         oSle.options[oSle.length]=new Option($2, $1, true, true);
  100.        } else oSle.options[oSle.length]=new Option($2, $1);
  101.      });
  102.            oSle=null;
  103.    } // end for 1
  104.    try{ arguments.callee(nPsti+1) } catch(e){}
  105.   } // end function fGoSelect
  106.     function fGetOptStr(nCount, sDelimiter){
  107.    if(nCount<=1)return false;
  108.    var sTemp='';
  109.    for(var i=1; i<nCount; i++){
  110.     var oSlePrnt=document.getElementById(tl.idBase+i);
  111.      sTemp+=oSlePrnt.options[oSlePrnt.options.selectedIndex].value;
  112.      sTemp+=sDelimiter;
  113.      sTemp+=oSlePrnt.options[oSlePrnt.options.selectedIndex].innerHTML;
  114.      sTemp+=sDelimiter;
  115.      oSlePrnt=null;
  116.    } // end for
  117.    return sTemp;
  118.   } // end function fGetOptStr(nCount, sDelimiter)
  119.     function fCreateOption(sStr){
  120.    if(tl.count>tl.item)return false;
  121.       var oSle=document.getElementById(tl.idBase+tl.count);
  122.     oSle.onchange=function(){
  123.      tl.onchange(this);
  124.     }
  125.    var sText='';
  126.    var sValue='';
  127.    var sTemp='';
  128.    if(tl.count==1){
  129.     var oRe=new RegExp('(.*?'+tl.delimiter+'.*?'+tl.delimiter+')(.*?'+tl.marker+')','gi');
  130.     sStr=sStr.replace(oRe, function($0, $1, $2){
  131.       sTemp+=$1;
  132.       return $2;
  133.     });
  134.    } else {
  135.     var sOpt=fGetOptStr(tl.count, tl.delimiter);
  136.     var oRe=new RegExp(sOpt+'(.*?'+tl.delimiter+'.*?'
  137.      +tl.delimiter+')(.*?'+tl.marker+')','gi');
  138.           tl.source.replace(oRe, function($0, $1, $2){
  139.       sTemp+=$1;
  140.       return $2;
  141.     });
  142.    } //end else 1
  143.       sTemp=fStrClearRepeat(sTemp, tl.delimiter);
  144.       var oRe=new RegExp('(.*?)'+tl.delimiter+'(.*?)'+tl.delimiter, 'gi');
  145.       sTemp.replace(oRe,
  146.     function($0, $1, $2){
  147.      if(fGoSelect(tl.count, tl.defaultSelect, $1)){
  148.       oSle.options[oSle.length]=new Option($2, $1, true, true);
  149.      } else oSle.options[oSle.length]=new Option($2, $1);
  150.    });
  151.        oSle=null;
  152.       tl.count++;
  153.    arguments.callee(sStr);
  154.   } // end function fCreateOption(sStr);
  155.     function fGoSelect(nPsti, sSle, sForCmp){
  156.    if(sSle=='')return false;
  157.    sSle=sSle.split(',');
  158.    if(sSle[nPsti-1]==sForCmp) return true;
  159.    return false;
  160.   } // end function fGoSelect(nPsti, sSle, sForCmp)
  161.     function fCkLevel(sSrc, sDelimiter,sMarker){
  162.    var num=0;
  163.    var re=new RegExp('(.*?)'+sMarker);
  164.    var re_=new RegExp(sDelimiter, 'g');
  165.       sSrc.replace(re,function($0,$1){
  166.     $1.replace(re_, function(m){
  167.      num++;
  168.     });
  169.    });
  170.    return num/2;
  171.   } // end fCkLevel(sSrc, sDelimiter,sMarker);
  172.     function fStrClearRepeat(sStr, sDelimiter){
  173.    var iStr='';
  174.    var re=new RegExp('.*?'+sDelimiter+'.*?'+sDelimiter, 'gi');
  175.       sStr=sStr.replace(re,function(m){
  176.     if(iStr.indexOf(m)==-1)
  177.     iStr+=m;
  178.     return '';
  179.    });
  180.    return iStr; // shawl.qiu code
  181.   } // end function fStrClearRepeat(sStr, sDelimiter);
  182.   //------------------------------------end private method
  183.  } // shawl.qiu code
  184.  //---------------------------------end class cFormSelect()---------------------------------//
  185. //]]>
  186. </script>
  187. </head>
  188. <body>
  189. <select name='super' id='level1'></select>
  190. <select name='sub' id='level2'></select>
  191. <select name='sub1' id='level3'></select>
  192. <br/><a href="?">back</a><br/>
  193. <a href="?id=1&idsub=13&idsub1=132">?id=1&idsub=13&idsub1=132</a><br/>
  194. <a href="?id=2&idsub=22&idsub1=223">?id=2&idsub=22&idsub1=223</a><br/>
  195. <a href="?id=3&idsub=31&idsub1=312">?id=3&idsub=31&idsub1=312</a><br/>
  196. </body>
  197. </html>
 1.3 四级联动演示
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>shawl.qiu template</title>
  6. <script type="text/javascript">
  7. //<![CDATA[
  8.   var str='1##cat 1##11##11cat ##111##111cat ##1111##1111cat ##@1##cat 1##11##11cat ##111##111cat ##1112##1112cat ##@1##cat 1##11##11cat ##111##111cat ##1113##1113cat ##@1##cat 1##11##11cat ##112##112cat ##1121##1121cat ##@1##cat 1##11##11cat ##112##112cat ##1122##1122cat ##@1##cat 1##11##11cat ##112##112cat ##1123##1123cat ##@1##cat 1##11##11cat ##113##113cat ##1131##1131cat ##@1##cat 1##11##11cat ##113##113cat ##1132##1132cat ##@1##cat 1##11##11cat ##113##113cat ##1133##1133cat ##@1##cat 1##12##12cat ##121##121cat ##1211##1211cat ##@1##cat 1##12##12cat ##121##121cat ##1212##1212cat ##@1##cat 1##12##12cat ##121##121cat ##1213##1213cat ##@1##cat 1##12##12cat ##122##122cat ##1221##1221cat ##@1##cat 1##12##12cat ##122##122cat ##1222##1222cat ##@1##cat 1##12##12cat ##122##122cat ##1223##1223cat ##@1##cat 1##12##12cat ##123##123cat ##1231##1231cat ##@1##cat 1##12##12cat ##123##123cat ##1232##1232cat ##@1##cat 1##12##12cat ##123##123cat ##1233##1233cat ##@1##cat 1##13##13cat ##131##131cat ##1311##1311cat ##@1##cat 1##13##13cat ##131##131cat ##1312##1312cat ##@1##cat 1##13##13cat ##131##131cat ##1313##1313cat ##@1##cat 1##13##13cat ##132##132cat ##1321##1321cat ##@1##cat 1##13##13cat ##132##132cat ##1322##1322cat ##@1##cat 1##13##13cat ##132##132cat ##1323##1323cat ##@1##cat 1##13##13cat ##133##133cat ##1331##1331cat ##@1##cat 1##13##13cat ##133##133cat ##1332##1332cat ##@1##cat 1##13##13cat ##133##133cat ##1333##1333cat ##@2##cat 2##21##21cat ##211##211cat ##2111##2111cat ##@2##cat 2##21##21cat ##211##211cat ##2112##2112cat ##@2##cat 2##21##21cat ##211##211cat ##2113##2113cat ##@2##cat 2##21##21cat ##212##212cat ##2121##2121cat ##@2##cat 2##21##21cat ##212##212cat ##2122##2122cat ##@2##cat 2##21##21cat ##212##212cat ##2123##2123cat ##@2##cat 2##21##21cat ##213##213cat ##2131##2131cat ##@2##cat 2##21##21cat ##213##213cat ##2132##2132cat ##@2##cat 2##21##21cat ##213##213cat ##2133##2133cat ##@2##cat 2##22##22cat ##221##221cat ##2211##2211cat ##@2##cat 2##22##22cat ##221##221cat ##2212##2212cat ##@2##cat 2##22##22cat ##221##221cat ##2213##2213cat ##@2##cat 2##22##22cat ##222##222cat ##2221##2221cat ##@2##cat 2##22##22cat ##222##222cat ##2222##2222cat ##@2##cat 2##22##22cat ##222##222cat ##2223##2223cat ##@2##cat 2##22##22cat ##223##223cat ##2231##2231cat ##@2##cat 2##22##22cat ##223##223cat ##2232##2232cat ##@2##cat 2##22##22cat ##223##223cat ##2233##2233cat ##@2##cat 2##23##23cat ##231##231cat ##2311##2311cat ##@2##cat 2##23##23cat ##231##231cat ##2312##2312cat ##@2##cat 2##23##23cat ##231##231cat ##2313##2313cat ##@2##cat 2##23##23cat ##232##232cat ##2321##2321cat ##@2##cat 2##23##23cat ##232##232cat ##2322##2322cat ##@2##cat 2##23##23cat ##232##232cat ##2323##2323cat ##@2##cat 2##23##23cat ##233##233cat ##2331##2331cat ##@2##cat 2##23##23cat ##233##233cat ##2332##2332cat ##@2##cat 2##23##23cat ##233##233cat ##2333##2333cat ##@3##cat 3##31##31cat ##311##311cat ##3111##3111cat ##@3##cat 3##31##31cat ##311##311cat ##3112##3112cat ##@3##cat 3##31##31cat ##311##311cat ##3113##3113cat ##@3##cat 3##31##31cat ##312##312cat ##3121##3121cat ##@3##cat 3##31##31cat ##312##312cat ##3122##3122cat ##@3##cat 3##31##31cat ##312##312cat ##3123##3123cat ##@3##cat 3##31##31cat ##313##313cat ##3131##3131cat ##@3##cat 3##31##31cat ##313##313cat ##3132##3132cat ##@3##cat 3##31##31cat ##313##313cat ##3133##3133cat ##@3##cat 3##32##32cat ##321##321cat ##3211##3211cat ##@3##cat 3##32##32cat ##321##321cat ##3212##3212cat ##@3##cat 3##32##32cat ##321##321cat ##3213##3213cat ##@3##cat 3##32##32cat ##322##322cat ##3221##3221cat ##@3##cat 3##32##32cat ##322##322cat ##3222##3222cat ##@3##cat 3##32##32cat ##322##322cat ##3223##3223cat ##@3##cat 3##32##32cat ##323##323cat ##3231##3231cat ##@3##cat 3##32##32cat ##323##323cat ##3232##3232cat ##@3##cat 3##32##32cat ##323##323cat ##3233##3233cat ##@3##cat 3##33##33cat ##331##331cat ##3311##3311cat ##@3##cat 3##33##33cat ##331##331cat ##3312##3312cat ##@3##cat 3##33##33cat ##331##331cat ##3313##3313cat ##@3##cat 3##33##33cat ##332##332cat ##3321##3321cat ##@3##cat 3##33##33cat ##332##332cat ##3322##3322cat ##@3##cat 3##33##33cat ##332##332cat ##3323##3323cat ##@3##cat 3##33##33cat ##333##333cat ##3331##3331cat ##@3##cat 3##33##33cat ##333##333cat ##3332##3332cat ##@3##cat 3##33##33cat ##333##333cat ##3333##3333cat ##@';
  9.    onload=function(){
  10.    var sle=new cFormSelect();
  11.      sle.source=str;                    // 源字串
  12.    sle.delimiter='##';                 // 列定界符
  13.    sle.marker='@';                    // 行分隔符
  14.    sle.idBase='level';                // 标签 ID 标准字串, 如: id1, id2. 其中的 id 就是基准字符.
  15.    sle.defaultSelect='3,31,313,3131';      // 默认选中项, 以值为准: 如 2,21,211. 请不要带空格.
  16.    sle.queryString='id,idsub,idsub1,idsub2'; // URL 栏查询串, 根据 URL 查询 ID 自动选中列表框项.
  17.       sle.getItem(); // 执行本程序
  18.       sle=null;
  19.  }
  20.  /*-----------------------------------------------------------------------------------*/
  21.   * shawl.qiu javascript 表单列表框联动类 v1.0
  22.  /*-----------------------------------------------------------------------------------*/
  23.  //---------------------------------begin class cFormSelect()-------------------------------//
  24.  function cFormSelect(){ // shawl.qiu code
  25.   //------------------------------------begin public variable
  26.   //---------------begin about
  27.   this.auSubject='shawl.qiu javascript 表单列表框联动类';
  28.   this.auVersion='1.0';
  29.   this.au='shawl.qiu';
  30.   this.auEmail='shawl.qiu@gmail.com';
  31.   this.auBlog='http://blog.csdn.net/btbtd';
  32.   this.auCreateDate='2006-12-28';
  33.   //---------------end about
  34.   this.source='';          // 源字串
  35.   this.delimiter='#';      // 列定界符
  36.   this.marker='@';         // 行分隔符
  37.   this.idBase='level';     // 标签 ID 基准字串 
  38.   this.defaultSelect='';   // 默认选中, 格式: 值,值,值...
  39.   this.queryString='';     // URL 查询ID
  40.     this.item=0;
  41.   this.count=1;
  42.   //------------------------------------end public variable
  43.     //------------------------------------begin public method
  44.   this.getItem=function(){
  45.    var sLcaStr=location.search;
  46.    if(sLcaStr!=''){
  47.     var arTemp=[];
  48.     if(tl.queryString!=''){
  49.      tl.queryString.replace(/(.+?)(/,|$)/g,function($0,$1){
  50.       var re=new RegExp($1+'/=([^/&/=]+)');
  51.        sLcaStr.replace(re,function($0,$1){
  52.         arTemp[arTemp.length]=$1;
  53.        });
  54.        re=null;
  55.      });
  56.      tl.defaultSelect=arTemp.join(',');
  57.     } // end if 2
  58.    } // end if 1
  59.       tl.item=fCkLevel(tl.source, tl.delimiter, tl.marker);
  60.    fCreateOption(tl.source);
  61.   } // end this.getItem
  62.     this.onchange=function(oSle){
  63.    var nId=oSle.id.replace(tl.idBase,'');
  64.     tl.count=nId;
  65.     fSelectOpt(tl.count);
  66.   } // end this.onchange
  67.   //------------------------------------end public method
  68.     //------------------------------------begin private variable
  69.   var tl=this;
  70.   //------------------------------------end private variable
  71.     //------------------------------------begin private method
  72.     function fSelectOpt(nPsti){
  73.    nPsti-=0;
  74.    var sOpt='';
  75.    var sTemp=''
  76.    for(var i=nPsti; i<nPsti+1; i++){
  77.     try{
  78.      var n_psti=i+1;
  79.      var oSle=document.getElementById(tl.idBase+n_psti);
  80.      oSle.length=0;
  81.     } catch(e){return false; }
  82.      var oSleTemp=document.getElementById(tl.idBase+nPsti);
  83.       sOpt+=oSleTemp.options[oSleTemp.options.selectedIndex].value;
  84.       sOpt+=tl.delimiter;
  85.       sOpt+=oSleTemp.options[oSleTemp.options.selectedIndex].innerHTML;
  86.       sOpt+=tl.delimiter;
  87.       oSleTemp=null;
  88.            var oRe=new RegExp(sOpt+'(.*?'+tl.delimiter+'.*?'
  89.       +tl.delimiter+')(.*?'+tl.marker+')','gi');
  90.             tl.source.replace(oRe, function($0, $1, $2){
  91.        sTemp+=$1;
  92.        return $2;
  93.      });
  94.            sTemp=fStrClearRepeat(sTemp, tl.delimiter);
  95.      var oRe=new RegExp('(.*?)'+tl.delimiter+'(.*?)'+tl.delimiter, 'gi');
  96.      sTemp.replace(oRe,
  97.       function($0, $1, $2){
  98.        if(fGoSelect(tl.item, tl.defaultSelect, $1)){
  99.         oSle.options[oSle.length]=new Option($2, $1, true, true);
  100.        } else oSle.options[oSle.length]=new Option($2, $1);
  101.      });
  102.            oSle=null;
  103.    } // end for 1
  104.    try{ arguments.callee(nPsti+1) } catch(e){}
  105.   } // end function fGoSelect
  106.     function fGetOptStr(nCount, sDelimiter){
  107.    if(nCount<=1)return false;
  108.    var sTemp='';
  109.    for(var i=1; i<nCount; i++){
  110.     var oSlePrnt=document.getElementById(tl.idBase+i);
  111.      sTemp+=oSlePrnt.options[oSlePrnt.options.selectedIndex].value;
  112.      sTemp+=sDelimiter;
  113.      sTemp+=oSlePrnt.options[oSlePrnt.options.selectedIndex].innerHTML;
  114.      sTemp+=sDelimiter;
  115.      oSlePrnt=null;
  116.    } // end for
  117.    return sTemp;
  118.   } // end function fGetOptStr(nCount, sDelimiter)
  119.     function fCreateOption(sStr){
  120.    if(tl.count>tl.item)return false;
  121.       var oSle=document.getElementById(tl.idBase+tl.count);
  122.     oSle.onchange=function(){
  123.      tl.onchange(this);
  124.     }
  125.    var sText='';
  126.    var sValue='';
  127.    var sTemp='';
  128.    if(tl.count==1){
  129.     var oRe=new RegExp('(.*?'+tl.delimiter+'.*?'+tl.delimiter+')(.*?'+tl.marker+')','gi');
  130.     sStr=sStr.replace(oRe, function($0, $1, $2){
  131.       sTemp+=$1;
  132.       return $2;
  133.     });
  134.    } else {
  135.     var sOpt=fGetOptStr(tl.count, tl.delimiter);
  136.     var oRe=new RegExp(sOpt+'(.*?'+tl.delimiter+'.*?'
  137.      +tl.delimiter+')(.*?'+tl.marker+')','gi');
  138.           tl.source.replace(oRe, function($0, $1, $2){
  139.       sTemp+=$1;
  140.       return $2;
  141.     });
  142.    } //end else 1
  143.       sTemp=fStrClearRepeat(sTemp, tl.delimiter);
  144.       var oRe=new RegExp('(.*?)'+tl.delimiter+'(.*?)'+tl.delimiter, 'gi');
  145.       sTemp.replace(oRe,
  146.     function($0, $1, $2){
  147.      if(fGoSelect(tl.count, tl.defaultSelect, $1)){
  148.       oSle.options[oSle.length]=new Option($2, $1, true, true);
  149.      } else oSle.options[oSle.length]=new Option($2, $1);
  150.    });
  151.        oSle=null;
  152.       tl.count++;
  153.    arguments.callee(sStr);
  154.   } // end function fCreateOption(sStr);
  155.     function fGoSelect(nPsti, sSle, sForCmp){
  156.    if(sSle=='')return false;
  157.    sSle=sSle.split(',');
  158.    if(sSle[nPsti-1]==sForCmp) return true;
  159.    return false;
  160.   } // end function fGoSelect(nPsti, sSle, sForCmp)
  161.     function fCkLevel(sSrc, sDelimiter,sMarker){
  162.    var num=0;
  163.    var re=new RegExp('(.*?)'+sMarker);
  164.    var re_=new RegExp(sDelimiter, 'g');
  165.       sSrc.replace(re,function($0,$1){
  166.     $1.replace(re_, function(m){
  167.      num++;
  168.     });
  169.    });
  170.    return num/2;
  171.   } // end fCkLevel(sSrc, sDelimiter,sMarker);
  172.     function fStrClearRepeat(sStr, sDelimiter){
  173.    var iStr='';
  174.    var re=new RegExp('.*?'+sDelimiter+'.*?'+sDelimiter, 'gi');
  175.       sStr=sStr.replace(re,function(m){
  176.     if(iStr.indexOf(m)==-1)
  177.     iStr+=m;
  178.     return '';
  179.    });
  180.    return iStr; // shawl.qiu code
  181.   } // end function fStrClearRepeat(sStr, sDelimiter);
  182.   //------------------------------------end private method
  183.  } // shawl.qiu code
  184.  //---------------------------------end class cFormSelect()---------------------------------//
  185. //]]>
  186. </script>
  187. </head>
  188. <body>
  189. <select name='super' id='level1'></select>
  190. <select name='sub' id='level2'></select>
  191. <select name='sub1' id='level3'></select>
  192. <select name='sub2' id='level4'></select>
  193. <br/><a href="?">back</a><br/>
  194. <a href="?id=1&idsub=13&idsub1=132&idsub2=1321">?id=1&idsub=13&idsub1=132&idsub2=1321</a><br/>
  195. <a href="?id=2&idsub=22&idsub1=223&idsub2=2232">?id=2&idsub=22&idsub1=223&idsub2=2232</a><br/>
  196. <a href="?id=3&idsub=31&idsub1=313&idsub2=3133">?id=3&idsub=31&idsub1=313&idsub2=3133</a><br/>
  197. </body>
  198. </html>
 2. 附: Jscript 生成联动内容
  1. <%@LANGUAGE="JAVASCRIPT" CODEPAGE="65001"%>
  2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml">
  4. <head>
  5. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  6. <title>shawl.qiu template</title>
  7. </head>
  8. <body>
  9. <%
  10.  var str='cat '
  11.  var sDelimiter='##';
  12.  var sMarker='@';
  13.  var iStr='';
  14.  /*
  15.  for(var i=1; i<=3; i++){
  16.   for(var j=1; j<=3; j++){
  17.     iStr+=i+sDelimiter+str+i+sDelimiter+
  18.      i+j+sDelimiter+i+j+str+sDelimiter+
  19.      sMarker;
  20.   } // end for 2 
  21.  } // end for 1
  22. */
  23.  /*
  24.  for(var i=1; i<=3; i++){
  25.   for(var j=1; j<=3; j++){
  26.    for(var k=1; k<=3; k++){
  27.     iStr+=i+sDelimiter+str+i+sDelimiter+
  28.      i+j+sDelimiter+i+j+str+sDelimiter+
  29.      i+j+k+sDelimiter+i+j+k+str+sDelimiter+
  30.      sMarker;
  31.    } // end for 3
  32.   } // end for 2 
  33.  } // end for 1
  34. */
  35.  for(var i=1; i<=3; i++){
  36.   for(var j=1; j<=3; j++){
  37.    for(var k=1; k<=3; k++){
  38.     for(var l=1; l<=3; l++){
  39.      iStr+=i+sDelimiter+str+i+sDelimiter+
  40.       i+j+sDelimiter+i+j+str+sDelimiter+
  41.       i+j+k+sDelimiter+i+j+k+str+sDelimiter+
  42.       i+j+k+l+sDelimiter+i+j+k+l+str+sDelimiter+
  43.       sMarker+'<br>';
  44.     } // end for 4
  45.    } // end for 3
  46.   } // end for 2 
  47.  } // end for 1
  48.   Response.write(iStr);
  49. %>
  50. </body>
  51. </html>
btbtd
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
javascript 简单高效判断数据类型 系列函数 By shawl.qiu
10-31
javascript 简单高效判断数据类型 系列函数 By shawl.qiu
js prototype 格式化数字 By shawl.qiu
10-30
js prototype 格式化数字 By shawl.qiu
shawl.qiu javascript 表单列表框联动类 v1.0 (支持无限级联动)
万里船的专栏
03-25 661
google_ad_client="pub-6065469188450680";google_ad_width=728;google_ad_height=90;google_ad_format="728x90_as";google_ad_type="text_image";google_ad_channel="6872543818";儿童节柜台递交的申请，现在一
shawl.qiu javascript 表单列表框联动类 v1.3 (支持无限级联动)
星☆空 | 对生活要知足,学习要不知足,为人处事要知不足. 卍 ♂ | ♀ 卐 - 科技以人为本.
05-30 2849
shawl.qiu javascript 表单列表框联动类 v1.3  (支持无限级联动)说明: 相关版本:1.0 shawl.qiu javascript 表单列表框联动类 v1.0  (支持无限级联动)http://blog.csdn.net/btbtd/archive/2006/12/29/1468163.aspx1.1 没发布1.2 shawl.qiu javascript 表单列表框
shawl.qiu javascript 表单列表框联动类 v1.2
星☆空 | 对生活要知足,学习要不知足,为人处事要知不足. 卍 ♂ | ♀ 卐 - 科技以人为本.
01-12 1574
shawl.qiu javascript 表单列表框联动类 v1.2  说明: 本次升级主要为增加两个功能, 可以自定义一个项, 和是否显示附加项... 1.1 版本没发布, 主要为除虫. 1.2 版本基本上没虫. 文章相关信息:主题: shawl.qiu javascript 表单列表框联动类 v1.2 发表者: sq 电子邮件: shawl.qiu@gmail.com QQ: 557091
shawl.qiu Javascript 圆角表格生成类 sqRounded v1.0
星☆空 | 对生活要知足,学习要不知足,为人处事要知不足. 卍 ♂ | ♀ 卐 - 科技以人为本.
05-13 1382
shawl.qiu Javascript 圆角表格生成类 sqRounded v1.0 说明:写这个东西其实嘛, 是因为本人烦了弄个纯CSS圆角表格老要复制一大堆代码, 麻烦不说, 还很容易出错...所以呗, 本类就诞生了.主要用法...:比如你有 div 标签, id 为 x那只需要调用一下本类就OK, 也可以一次作用于多个标签, 外观设置嘛, 由于是刚写, 肯定有不足的地方了, 这个只能在
发布 shawl.qiu Javascript 智能无限级导航菜单类 Menu class v1.0
星☆空 | 对生活要知足,学习要不知足,为人处事要知不足. 卍 ♂ | ♀ 卐 - 科技以人为本.
05-21 3675
发布 shawl.qiu Javascript 智能无限级导航菜单类 Menu class v1.0说明:导航菜单...这个东西每个站点, 大大小小都有嘛.不过每次写这个基本上都是重新码一遍代码, 很烦是吧, 对, 真的很烦.那么, 本类可以解决您的烦恼了.只要调用一下再设置一下就Ok, 而且你可以在一个页面使用本类显示N个菜单, 本类的特点是把各个设置都细分成小功能, 因此可以无限多兼容.菜
服务端 VBScript 与 JScript 几个相同特性的写法 By shawl.qiu
10-31
这篇文章由shawl.qiu撰写，主要探讨了这两种语言在服务端实现的一些共同特性，包括遍历集合/对象、转换变量值为变量并赋值以及动态包含文件的方法。 1. **遍历集合/对象** - **VBScript**：在VBScript中，可以使用...
编写纯 CSS 弹出菜单的原理及实现 By shawl.qiu
10-31
编写纯 CSS 弹出菜单的原理及实现 By shawl.qiu
Vue前端打包
weixin_63680330的博客
07-04 318
介绍:Nginx是一款轻量级的Web服务器/反向代理服务器及电子邮件(IMAP/POP3)代理服务器。其特点是占有内存少，并发能力强，在各大型互联网公司都有非常广泛的使用。启动：双击nginx.exe 文件启动，服务器默认占用80端口。官网:https://nginx.org/打包好的dist目录赋值到html下。html静态资源文件目录。conf 配置文件目录。logs日志文件目录。temp临时文件目录。
什么是防抖和节流？如何理解它们并在不同的场景条件下灵活运用？
最新发布
Vinca@的博客
07-08 489
防抖（Debouncing）和节流（Throttling）是两种常见的性能优化技术，常用于控制某些操作（例如事件处理器）的频率，从而减少资源消耗并提高性能。防抖：在事件停止触发后的指定时间内执行函数。适用于需要等用户停止操作后再处理事件的场景。节流：在指定时间间隔内最多执行一次函数。适用于需要限制函数执行频率的场景。滚动停止后的操作：使用防抖。滚动过程中的持续操作：使用节流。根据具体需求选择适合的优化技术可以有效提高应用性能和用户体验。
lightchart 和百度echarts 有什么区别, 各自优势是什么
huanghm88的专栏
07-08 98
总体而言，Lightchart和百度Echarts都是强大的图表库，选择使用哪个取决于具体的需求和个人偏好。如果您对界面简洁和定制化有较高要求，可以选择Lightchart；社区活跃：百度Echarts拥有广泛的用户群体和开发者社区，用户可以通过社区获取到丰富的文档、教程和示例，解决问题和获取帮助。易于使用：Lightchart提供了方便易用的API和丰富的文档和示例，使用户能够快速上手并灵活使用图表库。成熟稳定：百度Echarts已经发布了多个版本，经过了长时间的发展和优化，具有较高的稳定性和可靠性。
创建react的脚手架
Mmj_mmj的博客
07-05 365
网址：creat-react-app.bootcss.com主流的脚手架：creat-react-app。
vue3+ts项目中.env配置环境变量与情景配置
我愿化作繁星
07-03 920
就是在编码过程中应用这些自定义环境变量的时候，给出的智能提示。src目录下创建一个或者env.d.ts文件src同级别types目录下创建文件env.d.ts// 更多环境变量...在文件中专门用于处理项目src文件中的TypeScript配置文件，include配置项加入文件：(会提示自定义设置的环境变量)// ...// 第一种方式对应配置"vite-env.d.ts", // 或者 "env.d.ts"// 第二种方式对应配置。
vue2 img src 无法显示问题
guoruijun_2012_4的专栏
07-05 167
3、import这样写。2、data这样定义。
关于ant design vue 使用Modal无法关闭弹窗的解决思路
weixin_44784401的博客
07-03 441
关于ant design vue 使用Modal无法关闭弹窗的解决思路node_modules/.pnpm/pinia@2.1.7_typescript@5.5.2_vue@3.2.33/node_modules/pinia/dist/pinia.mjs:6:9: 6 │ import { hasInjectionContext, inject, toRaw, watch, unref, markRaw, effectScope, ref, isVue2,
【VUE】 深入理解 Vue 动态路由：简介、实际开发场景与代码示例
九日的博客
07-04 368
在传统的路由配置中，我们需要在初始化 Vue 实例时定义所有的路由。但在实际应用中，特别是涉及权限管理、模块懒加载等场景，我们可能需要根据用户的权限或其它条件动态添加或修改路由。Vue Router 提供的动态路由功能正是为了解决这些问题。
Pinia：Vue 2 和 Vue 3 中更好用的状态管理框架
独行猫a 的沉淀、积累、总结。天天学习，好好向上...c/c++,嵌入式 linux,Android,HarmonyOS)
07-04 606
Pinia是由Vue.js的核心维护者之一尤雨溪参与设计的下一代状态管理库，旨在提供一种更直观、更灵活的方式来管理Vue应用的状态。不同于传统的Vuex，Pinia从底层开始构建，充分利用Vue 3的新特性，特别是Composition API，使得状态管理变得更加自然和高效。Pinia凭借其现代化的设计理念、与Vue 3的深度融合、以及对Vue 2的良好兼容性，成为了Vue应用状态管理的新标准。无论你是Vue 2的忠实用户，还是Vue 3的探索者，Pinia都值得作为首选状态管理框架纳入你的开发工具箱。
JavaScript Set新增7个方法操作集合
a57521的博客
07-03 251
symmetricDifference () 它返回一个包含此集合或给定集合中的元素的新集合，但不包含同时存在于这两个集合中的元素。isSubsetOf () 它返回一个布尔值，指示此集合中的所有元素是否都在给定的集合中。difference () 它返回一个包含此集合中的元素但不包含给定集合中元素的新集合。intersection () 它返回一个包含此集合和给定集合中所有元素的新集合。union () 它返回一个包含此集合中所有元素和给定集合的新集合。
【源码下载】瓦房店农村电商大数据平台模板
http://8.130.10.148:3000/digitaltwin/index.html
07-08 220
用 echarts 和 jquery 实现的大屏模板效果，访问 dt.sim3d.cn，公众号后台回复【瓦房店农村电商大数据平台模板】获取源码。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值