下拉列表文本的移动

最新推荐文章于 2021-08-22 21:45:02 发布

kuaile863

最新推荐文章于 2021-08-22 21:45:02 发布

阅读量112

点赞数

分类专栏： java综合文章标签： JavaScript ViewUI

java综合专栏收录该内容

19 篇文章 0 订阅

订阅专栏

下拉列表文本移动

在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="单个向右移" οnclick="oneRMove()"/> 
   <input type="button" value="多个向右移" οnclick="moreRMove()"/> 
   <input type="button" value="单个向左移" οnclick="oneLMove()"/> 
   <input type="button" value="多个向左移" οnclick="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.οnlοad=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>

kuaile863

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
下拉列表文本的移动

下拉列表文本移动在js中还有许多有用的东西，今天编写了将下拉列表中的值移动到另一个下拉列表中实现效果如图：将左边的单个文本移向右边1-1 将右边的单个文本移向左边1-2 将左边的多个文本移向右边1-1 将右边的多个文本移向左边1-2网页文本代码： &lt;body&gt; &lt;spa...
复制链接

扫一扫