關於列表中內容的左右移動

用select框用來選中，select框中的屬性multiple="multiple"為可多選

<div id="data" align="left">

//左邊的列表框

        <select multiple="multiple" size="10"id="ldatas">

            <option>選項1</option>

            <option>選項2</option>

            <option>選項3</option>

            <option>選項4</option>

            <option>選項5</option>

            <option>選項6</option>

            <option>選項7</option>

            <option>選項8</option>

        </select>

    </div>

//中間的方向按鈕

    <div>

    //向右移動按鈕，可以移動一個，也可以移動多個

        <input type="button" id="rMove"value="--->"/>

    //向右移動全部

        <input type="button" id="rMoveAll"value="--->>"/><br/>

    //向左移動按鈕，可以移動一個，也可以移動多個

        <input type="button" id="lMove"value="&lt;---"/>

    //向左移動全部     &lt;為逸出字元，代表    <

        <input type="button" id="lMoveAll"value="&lt;&lt;---"/>

    </div>

    <div>

//右邊的列表框

        <select multiple="multiple" size="10"id="rdatas">

           

        </select>

    </div>

 

 

//全部向右移

           //select節點對象擷取

           var ldatasNode=get("ldatas");//左邊的下拉式清單方塊

           //擷取節點下面的所有的option節點對象

           var loptionsNode=ldatasNode.getElementsByTagName("option");//擷取了列表中的所有選項

          

           //擷取右移的節點對象

           var rMoveAllNode=get("rMoveAll");//向右移的按鈕

           //添加事件

           rMoveAllNode.onclick=function(){

              //擷取要添加的節點對象

              var rdatasNode=get("rdatas");

              var lengths=loptionsNode.length;//如果放到迴圈中，它是一個變值，所以迴圈的次數不夠

              for(var i=0;i<lengths;i++){

              //把idatasNode    個數10   始終移第一個 

                  rdatasNode.appendChild(loptionsNode[0]);

              }

           }

 

 

//---->右

           var rMoveNode=get("rMove");

           rMoveNode.onclick=function(){

              //擷取左邊節點中的所有options  然後再擷取被選中的option對象

              var ldatasNode=get("ldatas");

              var loptionsNode=ldatasNode.getElementsByTagName("option");

             

              //擷取右邊節點對象

              var rdatasNode=get("rdatas");

             

              for(var i=0;i<loptionsNode.length;i++){

                  if(loptionsNode[i].selected){

                     rdatasNode.appendChild(loptionsNode[i]);

//當把第一個移除時，i變為1，需要移動的第二個此時已經在原來的第一個的位置了，在移除第二個時，實際移動的是第三個

                     i--;

                  }

              }

           }

 

註：function get(id){

        return document.getElementById(id);

     }