两个 ListBox 之间移动数据

    <div>
        <table border="0" cellpadding="0" cellspacing="0" id="listtab">
            <tr>
                <td nowrap="nowrap" colspan="3">
                    <span id="lblLReceiver" style="display: inline-block; width: 93px;">选择的值：</span><input
                        name="txtReceive" type="text" id="txtReceive" style="width: 397px;" />
            </tr>
            <tr>
                <td style="width: 100px">
                    <select size="4" name="ListBox1" multiple="multiple" id="leftSide" style="height: 254px;
                        width: 156px;">
                        <option value="0">a</option>
                        <option value="1">b</option>
                        <option value="2">c</option>
                        <option value="3">d</option>
                        <option value="4">e</option>
                        <option value="5">f</option>
                    </select>
                </td>
                <td nowrap="nowrap">
                    <input οnclick="SelectAll();" id="btnSelectAll" type="button" value=">>>" style="width: 60px; height: 20px" /><br />
                    <br />
                    <input οnclick="SelectSingleOne();" id="btnSelectSingleOne" type="button" value=">" style="width: 60px; height: 20px" /><br />
                    <br />
                    <input οnclick="CancelSingleOne();" id="btnCancelSingleOne" type="button" value="<" style="width: 60px; height: 20px" /><br />
                    <br />
                    <input οnclick="CancelAll();" id="btnCancelAll" type="button" value="<<<" style="width: 60px; height: 20px" />
                </td>
                <td nowrap="nowrap">
                    <select size="4" name="ListBox2" multiple="multiple" id="rightSide" style="height: 255px;
                        width: 156px;">
                    </select>
                </td>
            </tr>
        </table>
    </div>      

 

<script type="text/javascript">
        // 选择全部
        function SelectAll()
        {
            var leftSide=document.getElementById("leftSide");
            var rightSide=document.getElementById("rightSide");
           
            var tempArray=new Array();
            for(var i=0;i<leftSide.options.length;i++)
            {
                tempArray.push(leftSide.options[i]);
            }
            for(var i=0;i<tempArray.length;i++)
            {
                leftSide.options.removeChild(tempArray[i]);
                rightSide.options.add(new Option(tempArray[i].text,tempArray[i].value));
            }
           
            tempArray.length=0;
            for(var i=0;i<rightSide.options.length;i++)
            {
                tempArray.push(rightSide.options[i]);
            }
            showValue(tempArray);
        }
        // 选择部分
        function SelectSingleOne()
        {
            var leftSide=document.getElementById("leftSide");
            var rightSide=document.getElementById("rightSide");
           
            var tempArray=new Array();
            for(var i=0;i<leftSide.options.length;i++)
            {
                if(leftSide.options[i].selected==true){
                    tempArray.push(leftSide.options[i]);
                }
                else{
                    continue;
                }
            }
           
            for(var i=0;i<tempArray.length;i++)
            {
                leftSide.options.removeChild(tempArray[i]);
                rightSide.options.add(new Option(tempArray[i].text,tempArray[i].value));
            }
           
            tempArray.length=0;
            for(var i=0;i<rightSide.options.length;i++)
            {
                tempArray.push(rightSide.options[i]);
            }
           
            showValue(tempArray);
        }
        // 取消部分
        function CancelSingleOne()
        {
            var leftSide=document.getElementById("leftSide");
            var rightSide=document.getElementById("rightSide");
           
            var tempArray=new Array();
            for(var i=0;i<rightSide.options.length;i++)
            {
                if(rightSide.options[i].selected==true){
                    tempArray.push(rightSide.options[i]);
                }
                else{
                    continue;
                }
            }
           
            for(var i=0;i<tempArray.length;i++)
            {
                rightSide.options.removeChild(tempArray[i]);
                leftSide.options.add(new Option(tempArray[i].text,tempArray[i].value));
            }
           
            tempArray.length=0;
            for(var i=0;i<rightSide.options.length;i++)
            {
                tempArray.push(rightSide.options[i]);
            }
            showValue(tempArray);
        }
        // 取消全部
        function CancelAll()
        {
            var leftSide=document.getElementById("leftSide");
            var rightSide=document.getElementById("rightSide");
           
            var tempArray=new Array();
            for(var i=0;i<rightSide.options.length;i++)
            {
                tempArray.push(rightSide.options[i]);
            }
            for(var i=0;i<tempArray.length;i++)
            {
                rightSide.options.removeChild(tempArray[i]);
                leftSide.options.add(new Option(tempArray[i].text,tempArray[i].value));
            }
           
            var t=document.getElementById("txtReceive");
            t.value="";
        }
        // 显示选中的值
        function showValue(array)
        {
            var t=document.getElementById("txtReceive");
            t.value="";
            for(var item in array)
            {
                t.value+=array[item].value+",";
            }
        }
    </script>