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>