<!DOCTYPE html>
<html>
<head>
<title>moveOption.html</title>

<meta name="keywords" content="keyword1,keyword2,keyword3">
<meta name="description" content="this is my page">
<meta name="content-type" content="text/html; charset=UTF-8">

<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
<script type="text/javascript">
    //声明全局变量
    var loptionDom; //左边的select对应的Dom对象
    var roptionDom; //右边的select对应的DOM对象
    //窗体加载完毕 获取dom对象
    window.onload = function() {
        //获取左边的select对应的Dom对象
        loptionDom = document.getElementById("loption");
        //获取右边的select对应的DOM对象
        roptionDom = document.getElementById("roption");
    };
    //向右移动
    function moveRight(value) {
        //获取左边select所有的option集合对象
        var options = loptionDom.options;
        //判断是否是单个移动
        if (value == 1) {
            //记住要移动的option对象
            var remberoptionDom = null;
            //记住要移动的option的数量
            var count = 0;
            //遍历options集合对象
            for (var i = 0; i < options.length; i++) {
                //获取option对象
                var optionDom = options[i];
                //判断是否是选中的option对象selected="selected"
                if (optionDom.selected) {
                    //赋值
                    remberoptionDom = optionDom;
                    //数量递增
                    count++;
                }
            }

//判断数量是否是1 如果是1代表移动一个
            if (count == 1) {
                //添加到了右边
                roptionDom.appendChild(remberoptionDom);
                //左边要移除
                loptionDom.removeChild(remberoptionDom);
            } else if (count == 0) {
                alert("请选择要移动的数据");
            } else {
                alert("请选择==>移动");
            }
        } else if (value == 0) {
            //遍历操作                为啥 一定要写成    i=options.length-1  ; i>=0;i--
            for (var i = options.length - 1; i >= 0; i--) {
                //获取option对象
                var optionDom = options[i]; //options[0]  //8
                //判断是否被选中
                if (optionDom.selected) {
                    //左边要移除
                    loptionDom.removeChild(optionDom);
                    //添加到了右边
                    roptionDom.appendChild(optionDom);
                }
            }
        }
    }
    //向左移动
    function moveLeft(value) {
        if (value == 1) {
        } else if (value == 0) {
        }
    }
</script>
</head>

<body>
    <!-- 左右移动的整个代码 -->
    <div style="width: 400px; height: 280px;margin: 0px auto;">
        <!-- 左边的代码 -->
        <div style="width: 100px; float:left;">
            <select multiple="multiple" style="height: 200px; width: 80px;"
                id="loption">
                <option>选项1</option>
                <option>选项2</option>
                <option>选项3</option>
                <option>选项4</option>
                <option>选项5</option>
                <option>选项6</option>
                <option>选项7</option>
                <option>选项8</option>
                <option>选项9</option>
            </select>
        </div>

<!-- 中间代码 -->
        <div style="width: 100px;float: left;margin-right: 30px;">
            <ul style="list-style: none;">
                <li><input type="button" value="-->"
                    style="width: 40px; margin-bottom: 15px;" onclick="moveRight(1)" />
                    <input type="button" value="==>"
                    style="width: 40px;margin-bottom: 15px;" onclick="moveRight(0)" />
                    <input type="button" value="<--"
                    style="width: 40px;margin-bottom: 15px;" onclick="moveLeft(1)" /> <input
                    type="button" value="<==" style="width: 40px;margin-bottom: 15px;"
                    onclick="moveLeft(0)" /></li>
            </ul>
        </div>

<!-- 右边代码 -->
        <div style="width: 100px; float: left; ">
            <select multiple="multiple" style="height: 200px; width: 80px;"
                id="roption"></select>
        </div>

</div>

</body>
</html>

效果：

JavaScript学习记录总结（九）——移动添加效果的更多相关文章

  1. JavaScript学习记录四

    title: JavaScript学习记录四 toc: true date: 2018-09-16 20:31:22 --<JavaScript高级程序设计(第2版)>学习笔记 要多查阅M ...

  2. Lua和C++交互 学习记录之九：在Lua中以面向对象的方式使用C++注册的类

    主要内容转载自:子龙山人博客(强烈建议去子龙山人博客完全学习一遍) 部分内容查阅自:<Lua 5.3  参考手册>中文版 译者 云风 制作 Kavcc vs2013+lua-5.3.3 在 ...

  3. JavaScript学习记录三

    title: JavaScript学习记录三 toc: true date: 2018-09-14 23:51:22 --<JavaScript高级程序设计(第2版)>学习笔记 要多查阅M ...

  4. JavaScript学习记录二

    title: JavaScript学习记录二 toc: true date: 2018-09-13 10:14:53 --<JavaScript高级程序设计(第2版)>学习笔记 要多查阅M ...

  5. JavaScript学习记录一

    title: JavaScript学习记录一 toc: true date: 2018-09-11 18:26:52 --<JavaScript高级程序设计(第2版)>学习笔记 要多查阅M ...

  6. ElasticSearch 学习记录之ES查询添加排序字段和使用missing或existing字段查询

    ES添加排序 在默认的情况下,ES 是根据文档的得分score来进行文档额排序的.但是自己可以根据自己的针对一些字段进行排序.就像下面的查询脚本一样.下面的这个查询是根据productid这个值进行排 ...

  7. Javascript学习记录——原生JS实现旋转木马特效

    昨天学习到了JS特效部分,然后老师讲了旋转木马特效的实现,如上图.不过只是讲了通过点击箭头实现图片的切换,对于点击图片本身以及二者联动却是没有讲解. 本着一颗追求完美的心,今天花费了一个中午终于将整个 ...

  8. JavaScript学习记录总结（七）——dom对象应用之用户简单管理

    <!DOCTYPE html><html><head><title>users.html</title> <meta name=&qu ...

  9. javascript 学习总结（九）面向对象编程

    1.面向对象的工厂方法 function createPerson(name, age, job){ var o = new Object(); o.name = name; o.age = age; ...

随机推荐

  1. 元数据和DbUtils

    使用元数据可以在jdbc中获取数据库的定义,例如:数据库.表.列的定义信息. 在jdbc中可以使用: 数据库元数据.参数元数据.结果集元数据. 1.DataBaseMetaData对象 Connect ...

  2. Android 读写SD卡的文件

    今天介绍一下Android 读写SD卡的文件,要读写SD卡上的文件,首先需要判断是否存在SD卡,方法: Environment.getExternalStorageState().equals(Env ...

  3. App Store--心酸的上线路，说说那些不可思议的被拒理由

    yoyeayoyea 您的应用包括色情内容(色情交易,色情展示). 原因是我们的销售人员,把几张艺术照放在个人相册里(头像),换成卡通头像,通过.    颜小风 被拒很正常 一次通过不正常. 之前上线 ...

  4. Apache Qpid Python 1.35.0 发布

    Apache Qpid Python 1.35.0 发布了,Apache Qpid (Open Source AMQP Messaging) 是一个跨平台的企业通讯解决方案,实现了高级消息队列协议.提 ...

  5. html练习——个人简介

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  6. 解决win7资源监视器不能开启

    刚开始时是这样,点击开始监控,无效 需要开始服务即可解决

  7. php大力力 [015节]兄弟连高洛峰php教程（土豆网栏目地址）

    兄弟连高洛峰php教程 兄弟连高洛峰php教程(土豆网栏目地址) [2014]兄弟连高洛峰 PHP教程1.1.1 新版视频形式介绍 [2014]兄弟连高洛峰 PHP教程1.1.2 BS结构软件类型介绍 ...

  8. FR #3题解

    A. 傻逼题?...前缀和什么的随便搞搞就好了. #include<iostream> #include<cstdio> #include<cstring> #in ...

  9. vi中的批量替换

    举个例子啊: 将文件tihuan(假设此文本中字符a)中的所有字符a换成字符w,其命令为: 1.vi tihuan 2.按esc键 3.按shift+: 4.在:后输入    %s/a/w/g 就ok ...

  10. Ubuntu下Eclipse中文乱码问题解决（转）

    Ubuntu下Eclipse中文乱码问题解决 把Windows下的工程导入到了Linux下Eclipse中,由于以前的工程代码,都是GBK编码的(Windows下的Eclipse 默认会去读取系统的编 ...