JS 两个 Select 移动 项

<!--<br /> <br /> Code highlighting produced by Actipro CodeHighlighter (freeware)<br /> http://www.CodeHighlighter.com/<br /> <br /> --> /* * 
*WRITE BY   :惠万鹏
*DATE       :2008-06-10
*VERSION    :1.0
*DESCRIPTION:
*/
var  SelUtil  =  
{
     /* *
    *对二维数组进行排序
    *arr      :将要排序的数组
    *dimIndex :按第几维排序,可选值0或1
    *ascOrDexc:按升序或降序,可先值为0或1
    *返回一个已经排好序的数组
     */
    __sortDyadicArray :  function  (arr, dimIndex, ascOrDesc)
    {
       var  tempArr  =   null ;
       /* * 使用选择排序法排序 */
       for ( var  m  =   0 ; m  <  arr.length - 1 ; m ++ )
      {
         var   index   =  m;
         for ( var  n  =  m  +   1 ; n  <  arr.length; n ++ ){
           /* * 按第一维升序排序  */
           if (dimIndex  ==   0   &&  ascOrDesc  ==   0  
             &&  arr [ n ][ 0 ]   <  arr [ index ][ 0 ] )
          {
             index   =  n;
          }
           /* * 按第一维降序排列  */
           else   if (dimIndex  ==   0   &&  ascOrDesc  ==   1  
             &&  arr [ n ][ 0 ]   >  arr [ index ][ 0 ] )
          {
             index   =  n;
          }
           /* * 按第二维升序排序  */
           else   if (dimIndex  ==   1   &&  ascOrDesc  ==   0  
             &&  arr [ n ][ 1 ]   <  arr [ index ][ 1 ] )
          {
             index   =  n;
          }
           /* * 按第二维降序排列  */
           else   if (dimIndex  ==   1   &&  ascOrDesc  ==   1  
             &&  arr [ n ][ 1 ]   >  arr [ index ][ 1 ] )
          {
             index   =  n;
          }
        }
        tempArr  =     arr [ m ] ;
        arr [ m ]   =      arr [ index ] ;
        arr [ index ]   =  tempArr;
      }
       return  arr;
    },
     /* *向Sel中加入一项
    *oListbox:列表对象
    *sName   :Listbox文本
    *sValue  :Listbox值
     */
    __ add  :  function  (oListbox, sValue, sName, sInitValue)
    {
         var  oOption  =  document.createElement(" option ");
        oOption.appendChild(document.createTextNode(sName));
         if  (arguments.length  ==   4 )
        {
            oOption.setAttribute("value",sValue);
             if (sValue  ==  sInitValue)
            {
                oOption.setAttribute("selected",true);
            }
            oListbox.appendChild(oOption);
        }
    },
     /* *
    *从二维数中加入多个option
    *oListbox   :列表对象
    *dyadicArray:二维数组
     */
    __addAll :  function  (oListbox, dyadicArray, sSelected)
    {
         for ( var  i  =   0 ; i  <  dyadicArray.length; i ++ )
        {
            this.__ add (oListbox, dyadicArray [ i ][ 0 ] , dyadicArray [ i ][ 1 ] , sSelected);
        }
    },
     /*
    *从Sel中删除一项
    *oListbox:列表对象
    *iIndex  :项的索引号
     */
    __remove :  function  (oListbox, iIndex)
    {
        oListbox.remove(iIndex);
    },
     /*
    *清空Sel的所有项
    *oListbox:列表对象
     */
    __clear :  function  (oListbox)
    {
         for  ( var  i  =  oListbox.options.length  -   1 ; i  >=   0 ; i -- )
        {
            this.__remove(oListbox, i);
        }
    },
     /* *
    *两个Sel中相互移动
    *oListboxFrom:将要被移除的列表
    *oListboxTo  :将要被移到的列表
    *iIndex      :项的索引号
     */
    __move :  function  (oListboxFrom, oListboxTo, iIndex)
    {
         var  oOption  =  oListboxFrom.options(iIndex);
         if (oOption  !==   null )
        {
            oListboxTo.appendChild(oOption);
        }
    },
     /* *
    *把所有选中的项移到另一个列表
    *oListboxFrom:将要被移到的列表
    *oListboxTo  :将要被移到的列表
     */
    __moveAll :  function  (oListboxFrom, oListboxTo,type)
    {
         var  indexes  =  this.__getIndexes(oListboxFrom,type);
         for ( var  i  =  indexes.length  -   1 ; i  >=   0 ; i  -- )
        {
            this.__move(oListboxFrom, oListboxTo, indexes [ i ] );
        }
    },
     /* *
    *把指定索引的项上移一个位置
    *oListbox:列表对象
    *iIndex  :索引号
     */
    __shiftUp :  function  (oListbox, iIndex)
    {
         if (iIndex  >   0 )
        {
             var  oOption  =  oListbox.options [ iIndex ] ;
             var  oPrevOption  =  oListbox.options [ iIndex - 1 ] ;
            oListbox.insertBefore(oOption, oPrevOption);
        }
    },
     /* *
    *把指定索引的项下移一个位置
    *oListbox:列表对象
    *iIndex  :索引号
     */
    __shiftDown :  function  (oListbox, iIndex)
    {
         if  (iIndex  <  oListbox.options.length  -   1 )
        {
             var  oOption  =  oListbox.options [ iIndex ] ;
             var  oNextOption  =  oListbox.options [ iIndex + 1 ] ;
            oListbox.insertBefore(oNextOption, oOption);
        }
    },
     /* *
    *得到选中的索引
    *oListbox:列表对像
    *type    :可选值:1选中的index,0全部index,-1没选中的index
     */
    __getIndexes :  function  (oListbox, type)
    {
         var  arrIndexes  =  new Array;
         for ( var  i  =   0 ; i  <  oListbox.options.length; i ++ )
        {
             if (type  ==   1 )
            {
                 if  (oListbox.options [ i ] .selected)
                {
                    arrIndexes.push(i);
                }
            }
             else   if (type  ==   0 )
            {
                arrIndexes.push(i);
            }
             else   if (type  ==   - 1 )
            {
                 if  (!oListbox.options [ i ] .selected)
                {
                    arrIndexes.push(i);
                }
            }
        }
         return  arrIndexes;
    },
     /* *
    *把一个字符串转换成一个二维数组
    *str:带有分隔符的字符串
     */
    __strToDyadicArray :  function  ( str )  
    {
         var  kvs  =   str .split( ' | ' );
         var  dyadicArray  =  new Array(kvs.length);
         for ( var  i  =   0 ; i  <  kvs.length; i ++ )
        {
            dyadicArray [ i ]   =  new Array( 2 );
            dyadicArray [ i ][ 0 ]   =  kvs [ i ] . substring ( 0 , kvs [ i ] .indexOf(":"));
            dyadicArray [ i ][ 1 ]   =  kvs [ i ] . substring (kvs [ i ] .indexOf(":")  +   1 , kvs [ i ] .length);
        }
         return  dyadicArray;
    },
     /* *
    *初始化一个Sel
    *SelId   :Sel的id
    *str     :初始化字符串
    *sDefault:默认值
     */
    initSel :  function (selId,  str , sSelected)
    {
         if ( str .length  >   0 )
        {
             var  kvs  =  this.__strToDyadicArray( str );
            oSel  =  document.getElementById(selId);
            this.__addAll(oSel,kvs,sSelected);
        }
    },
     /* *
    *初始化两个Sel
    *selLeftId :左边Sel的id
    *selRightId:右边Sel的id
    *strLeft   :左边初始化字符串
    *strRight  :右边初始化字符串
     */
    initDouSel :  function (selLeftId, selRightId, strLeft, strRight)
    {
        this.initSel(selLeftId, strLeft,  ' XXXX ' );
        this.initSel(selRightId, strRight,  ' XXXX ' );
    },
     /* *
    *左边全部移到右边
    *selLeftId :左边列表id
    *selRightId:右边列表id
    *bla       :button left all
    *blp       :button left part
    *bra       :button right all
    *brp       :button right part
     */
    leftSelToRightSelAll :  function (selLeftId, selRightId, bla, blp, bra, brp)
    {
         var  oSelLeft  =  document.getElementById(selLeftId);
         var  oSelRight  =  document.getElementById(selRightId);
        this.__moveAll(oSelLeft,oSelRight, 0 );
        document.getElementById(bla).disabled  =  true;
        document.getElementById(blp).disabled  =  true;
        document.getElementById(bra).disabled  =  false;
        document.getElementById(brp).disabled  =  false;
    },
     /* *
    *左边选中的项全部移到右边
    *selLeftId :左边列表id
    *selRightId:右边列表id
    *bla       :button left all
    *blp       :button left part
    *bra       :button right all
    *brp       :button right part
     */
    leftSelToRightSelPart :  function (selLeftId, selRightId, bla, blp, bra, brp)
    {
         var  oSelLeft  =  document.getElementById(selLeftId);
         var  oSelRight  =  document.getElementById(selRightId);
        this.__moveAll(oSelLeft,oSelRight, 1 );
         if (this.__getIndexes(oSelLeft, 0 ).length  ==   0 )
        {
            document.getElementById(bla).disabled  =  true;
            document.getElementById(blp).disabled  =  true;
        }
         else
        {
            document.getElementById(bla).disabled  =  false;
            document.getElementById(blp).disabled  =  false;
        }
        document.getElementById(bra).disabled  =  false;
        document.getElementById(brp).disabled  =  false;
    },
     /* *
    *右边全部移到左边
    *selLeftId :左边列表id
    *selRightId:右边列表id
    *bla       :button left all
    *blp       :button left part
    *bra       :button right all
    *brp       :button right part
     */
    rightSelToleftSelAll :  function (selLeftId, selRightId, bla, blp, bra, brp)
    {
         var  oSelLeft  =  document.getElementById(selLeftId);
         var  oSelRight  =  document.getElementById(selRightId);
        this.__moveAll(oSelRight,oSelLeft, 0 );
        document.getElementById(bra).disabled  =  true;
        document.getElementById(brp).disabled  =  true;
        document.getElementById(bla).disabled  =  false;
        document.getElementById(blp).disabled  =  false;
    },
     /* *
    *左边选中的项全部移到右边
    *selLeftId :左边列表id
    *selRightId:右边列表id
    *bla       :button left all
    *blp       :button left part
    *bra       :button right all
    *brp       :button right part
     */
    rightSelToLeftSelPart :  function (selLeftId, selRightId, bla, blp, bra, brp)
    {
         var  oSelLeft  =  document.getElementById(selLeftId);
         var  oSelRight  =  document.getElementById(selRightId);
        this.__moveAll(oSelRight, oSelLeft,  1 );
         if (this.__getIndexes(oSelRight, 0 ).length  ==   0 )
        {
            document.getElementById(bra).disabled  =  true;
            document.getElementById(brp).disabled  =  true;
        }
         else
        {
            document.getElementById(bra).disabled  =  false;
            document.getElementById(brp).disabled  =  false;
        }
        document.getElementById(bla).disabled  =  false;
        document.getElementById(blp).disabled  =  false;
    }
}

使用方法:

<!--<br /> <br /> Code highlighting produced by Actipro CodeHighlighter (freeware)<br /> http://www.CodeHighlighter.com/<br /> <br /> --> < html >
< head >
     < title > Two-Select </ title >
     < script  language ="javascript"  src ="/SelUtil.js"  charset ="gb2312" ></ script >
</ head >

< body >
     < select  id ="s1"  style ="width:80;height:100;float:left"  multiple ></ select >
     < div  style ="width:50;height:100;margin:5px;float:left;text-align:center;" >
         < input  type ="button"  id ="b1"  class ="b1"  value ="&gt;&gt;"  
            onclick ="SelUtil.leftSelToRightSelAll('s1','s2','b1','b2','b3','b4')" >
         < input  type ="button"  id ="b2"  class ="b2"  value ="&gt;"
            onclick ="SelUtil.leftSelToRightSelPart('s1','s2','b1','b2','b3','b4')" >
         < input  type ="button"  id ="b3"  class ="b3"  value ="&lt;"  
            onclick ="SelUtil.rightSelToLeftSelPart('s1','s2','b1','b2','b3','b4')"   >  
         < input  type ="button"  id ="b4"  class ="b4"  value ="&lt;&lt;"
            onclick ="SelUtil.rightSelToleftSelAll('s1','s2','b1','b2','b3','b4')"   >
     </ div >
     < select  id ="s2"  style ="width:80;height:100"  multiple ></ select >
     < script  language ='javascript' >
          var  str1  =   " 1:赵云|2:张辽|3:典韦 " ;
         var  str2  =   " 4:吕布|5:张飞|6:关羽 " ;
        document.body.onload  =   function  ()
        {
            SelUtil.initDouSel( " s1 " , " s2 " ,str1,str2);
        }
     </ script >
</ body >
</ html >