关于列表中内容的左右移动

用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);

     }