下拉列表文本的移动

kuaile863

浏览: 115429 次
性别:
来自: 北京

最近访客更多访客>>

nakin1991

leaf-stop

sanlang888

niuhin

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

java综合

JavaScript

下拉列表文本移动

在js中还有许多有用的东西，今天编写了将下拉列表中的值移动到另一个下拉列表中

实现效果如图：

将左边的单个文本移向右边1-1

将右边的单个文本移向左边1-2

将左边的多个文本移向右边1-1

将右边的多个文本移向左边1-2

网页文本代码：

 <body>
   <span><select id="lselect" size="7" style="width: 100px; background-color: red" multiple="multiple">
   <option>选项1</option>
   <option>选项2</option>
   <option>选项3</option>
   <option>选项4</option>
   <option>选项5</option>
   <option>选项6</option>
   <option>选项7</option>
   </select>
   </span>
   <span style="width: 200px; height: 100px;">
   <input type="button" value="单个向右移" onclick="oneRMove()"/> 
   <input type="button" value="多个向右移" onclick="moreRMove()"/> 
   <input type="button" value="单个向左移" onclick="oneLMove()"/> 
   <input type="button" value="多个向左移" onclick="moreLMove()"/> 
   </span>
   <span>
   <select id="rselect"  size="7" style="width: 100px; background-color: blue" multiple="multiple">
   </select>
   </span>
   </body>

Js实现代码：

<script type="text/javascript">
<!--
window.onload=function(){

}

function oneRMove(){
 var lselect=document.getElementById("lselect");
 var rselect=document.getElementById("rselect");
 var loptions=lselect.options;
 for(var i=0;i<loptions.length;i++){
   var op=loptions[i];
   if(op.selected){
    rselect.appendChild(op);
    break;
   }
 
 }

}

function moreRMove(){
 var lselect=document.getElementById("lselect");
 var rselect=document.getElementById("rselect");
 var loptions=lselect.options;
 for(var i=0;i<loptions.length;i++){
   var op=loptions[i];
   if(op.selected){
    rselect.appendChild(op);
      i--;
   }
  
 }


}
function oneLMove(){
 var lselect=document.getElementById("lselect");
 var rselect=document.getElementById("rselect");
 var roptions=rselect.options;
 for(var i=0;i<roptions.length;i++){
   var op=roptions[i];
   if(op.selected){
    lselect.appendChild(op);
    break;
   }
 
 }

}

function moreLMove(){
 var lselect=document.getElementById("lselect");
 var rselect=document.getElementById("rselect");
 var roptions=rselect.options;
 for(var i=0;i<roptions.length;i++){
   var op=roptions[i];
   if(op.selected){
    lselect.appendChild(op);
     i--;
   }
   
 }

}
//-->
</script>