<!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. IT公司100题-2-设计带min函数的stack

    问题描述: 定义栈的数据结构,要求添加一个min 函数,能够得到栈的最小元素. 要求函数min.push 以及pop 的时间复杂度都是O(1).   双倍空间实现: 保存2个栈,分别是元素和当前最小值 ...

  2. 【个人使用.Net类库】（1）INI配置文件操作类

    开发接口程序时,对于接口程序配置的IP地址.端口等都需要是可配置的,而在Win Api原生实现了INI文件的读写操作,因此只需要调用Win Api中的方法即可操作INI配置文件,关键代码就是如何调用W ...

  3. Map-Reduce的工作机制

    Mapper “Map-Reduce”的思想就是“分而治之” Mapper负责“分”,即把复杂的任务分解为若干个“简单的任务”而执行 “简单的任务”有几个意思:1.数据或计算规模相对于原任务要大大缩小 ...

  4. Visual Studio 2015 预览版 - 支持跨平台开发Android/iOS应用程序(内置安卓模拟器)

    微软最近的惊人举动真多,对普通消费者Office 移动版宣布免费,对开发者也发布了完全免费的 VS2013 社区版! 不仅如此,就连 .Net 开发框架环境也竟然「开源」并且跨平台支持 Mac 及 L ...

  5. iOS开发之UITableView使用总结

    什么是UITableView 在众多移动应用中,能看到各式各样的表格数据 在iOS中,要实现表格数据展示,最常用的做法就是使用UITableView UITableView继承自UIScrollVie ...

  6. julia生成指定格式的字符串.jl

    julia生成指定格式的字符串.jl """ julia生成指定格式的字符串.jl http://bbs.bathome.net/thread-39829-1-1.htm ...

  7. SVG 2D入门9 - 蒙板

    SVG支持的蒙板 SVG支持多种蒙板特效,使用这些特性,我们可以做出很多很炫的效果.至于中文中把mask叫做"蒙板"还是"遮罩"就不去区分了,这里都叫做蒙板吧. ...

  8. BZOJ 1912 巡逻

    重赋边权. #include<iostream> #include<cstdio> #include<cstring> #include<algorithm& ...

  9. apk在IIS中的MIME设置

    支持下载的话: 扩展名中填写“.apk”, MIME类型中填写apk的MIME类型“ application/vnd.android.package-archive ”

  10. POJ 2436 二进制枚举+位运算

    题意:给出n头牛的得病的种类情况,一共有m种病,要求找出最多有K种病的牛的数目: 思路:二进制枚举(得病处为1,否则为0,比如得了2 1两种病,代号就是011(十进制就是3)),首先枚举出1的个数等于 ...