下拉列表左右选择(js代码)

最新推荐文章于 2023-08-23 00:47:21 发布

那人好像一条狗

最新推荐文章于 2023-08-23 00:47:21 发布

阅读量353

点赞数

本文链接：https://blog.csdn.net/jeffhymm/article/details/78359382

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
<script type="text/javascript">
     //将选择的添加到右边
     function partToRigth(){                var selectLeft=document.getElementById("selectLeft");
        //得到左边select对象的子节点
        var node=selectLeft.getElementsByTagName("option");
        //得到右边的select对象
        var selectRight=document.getElementById("selectRight");
        //判断是否选中
        for(var i=0;i<node.length;i++){
               var op = opss[i];
         //判断是否被选中
         if(op.selected == true) { //被选中
             //添加到select1里面
            s1.appendChild(op);
             i--;
         }
        }
     } 
     //将全部添加到右边
    function allToRight(){         //得到左边的select 对象        var selectLeft=document.getElementById("selectLeft");        //得到左边select对象的子节点        var node=selectLeft.getElementsByTagName("option");        //得到右边的select对象        var selectRight=document.getElementById("selectRight");        //将所有的子节点添加到右边的select对象中        for(var i=0;i<node.length;i++){            selectRight.appendChild(node[i]);            i--;        }    }</script></head><body>      <div id="left" style="float:left">          <select id="selectLeft"  multiple="multiple" style="width:100px;height:100px;">              <option>路飞</option>              <option>索隆</option>              <option>山治</option>              <option>娜美</option>              <option>乔巴</option>          </select>      </div>      <div id="right" style="float:left">           <select id="selectRight"  multiple="multiple" style="width:100px;height:100px;">           </select>      </div>      <input type="button" value="全部添加到右边" οnclick="allToRight()">      <input type="button" value="添加选择的到右边"></body></html>