zoukankan      html  css  js  c++  java
  • 左右移动案例

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <title>左右移动</title>
    <meta charset="UTF-8">
    <style>
    #box_l,#choice,#box_r{
    display:inline-block;

    }
    #choice{
    background-color: rebeccapurple;
    }
    </style>
    </head>
    <body>
    <div id="box_l">
    <select id="left" multiple size="10">
    <option>选项一</option>
    <option>选项二</option>
    <option>选项三</option>
    <option>选项四</option>
    <option>选项五</option>
    <option>选项六</option>
    </select>

    </div>
    <div id="choice">
    <input type="button" value="----->" onclick="add()"><br>
    <input type="button" value="=====>" onclick="addall()"><br>
    <input type="button" value="<-----" ><br>
    <input type="button" value="<=====">
    </div>
    <div id="box_r">
    <select multiple size="10" id="right">
    <option>选项七</option>

    </select>
    </div>
    <script>
    var right=document.getElementById('right');
    var left=document.getElementById('left');
    function add() {
    var options=left.children;
    for(var i=0;i<options.length;i++){
    if(options[i].selected==true){
    options[i].selected=false;
    right.appendChild(options[i]);
    i--;//避免遗漏添加
    }
    }
    }
    function addall(){
    var options=left.children;
    for(var i=0;i<options.length;i++){

    right.appendChild(options[i]);
    i--;
    }
    }
    </script>

    </body>
    </html>
  • 相关阅读:
    MySQL8.0.x安装和基本设置说明
    centos怎么解压zip格式文件
    MySQL数据插入
    linux下防火墙开放3306端口
    Linux Tomcat 进程与端口占用的查看与处理
    MySQL游标简介【8】
    centos7修改网卡名【2】
    CentOS安装NVIDIA显卡驱动方法
    长沙市轨道交通工程BIM应用招标公告
    问题若干
  • 原文地址:https://www.cnblogs.com/startl/p/12272619.html
Copyright © 2011-2022 走看看