注意点：

1、select标签size属性显示选项数组，multiple属性可以多选

2、原select节点下的子节点在移动到其他selec标签下的时候，其原来的select标签下子节点长度在发生变化

3、注册事件可以直接绑定一个函数名，但是如果绑定的函数有参数，那么必须将这个有参数的函数写入到匿名函数中

4、Array.from可将一个类似数组或可迭代对象中创建一个新的数组实例

选择水果简单版本：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        select {

            width: 100px;

            height: 200px;

            background-color: #D3FF82;

        }

    </style>

</head>

<body>

<select size="10">

    <option>香蕉</option>

    <option>苹果</option>

    <option>葡萄</option>

    <option>西瓜</option>

    <option>芒果</option>

</select>

<button><<<<</button>

<button><</button>

<button>>>>></button>

<button>></button>

<select size="10"></select>

<script>

    var btnArr = document.getElementsByTagName("button");

    var selArr = document.getElementsByTagName("select");

    //selArr数组的长度一直在变化

    btnArr[0].onclick = function () {

        for (var i = 0; i < selArr[0].children.length;) {

            selArr[1].appendChild(selArr[0].children[i]);

        }

    }

    btnArr[2].onclick = function () {

        for (var i = 0; i < selArr[1].children.length;) {

            selArr[0].appendChild(selArr[1].children[i]);

        }

    }

    btnArr[1].onclick = function () {

        for (var i = selArr[0].children.length-1; i >= 0; i--) {

            if (selArr[0].children[i].selected == true) {

                selArr[1].appendChild(selArr[0].children[i]);

            }

        }

    }

    btnArr[3].onclick = function () {

        for (var i = selArr[1].children.length-1; i >= 0; i--) {

            if (selArr[1].children[i].selected == true) {

                selArr[0].appendChild(selArr[1].children[i]);

            }

        }

    }

</script>

</body>

</html>

选择水果最终版本：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        select {

            width: 100px;

            height: 200px;

            background-color: #D3FF82;

        }

    </style>

</head>

<body>

<select size="10" multiple="multiple">

    <option value="0">香蕉</option>

    <option value="1">苹果</option>

    <option value="2">葡萄</option>

    <option value="3">西瓜</option>

    <option value="4">芒果</option>

</select>

<button><<<<</button>

<button><</button>

<button>>>>></button>

<button>></button>

<select size="10" multiple="multiple"></select>

<script>

    var btnArr = document.getElementsByTagName("button");

    var selArr = document.getElementsByTagName("select");

    //selArr数组的长度一直在变化

    //注册事件调用函数，在无参数的情况下可以直接绑定一个函数名，有参数的话，只能在匿名函数中调用

    btnArr[0].onclick = function () {

        allMove(selArr[0], selArr[1]);

    }

    btnArr[2].onclick = function () {

        allMove(selArr[1], selArr[0]);

    }

    function allMove(se1, se2) {

        for (var i = 0; i < se1.children.length;) {

            se1.children[i].selected = false;

            se2.appendChild(se1.children[i]);

        }

    }

    btnArr[1].onclick = function () {

        sigleSwitch(selArr[0], selArr[1]);

    }

    btnArr[3].onclick = function () {

        sigleSwitch(selArr[1], selArr[0]);

    }

    function sigleSwitch(se1, se2) {

        for (var i = se1.children.length - 1; i >= 0; i--) {

            if (se1.children[i].selected == true) {

                se1.children[i].selected = false;

                se2.appendChild(se1.children[i]);

            }

        }

        //对se2排序，并将排序过后的值存储到arr数组中

        var arr = Array.from(se2.children).sort(function (a, b) {

            return a.value - b.value;

        });

        //删除se2中的子节点

        for (var i = 0; i < se2.children.length;) {

            se2.removeChild(se2.children[i]);

        }

        //将arr数组中的子节点添加到se2中

        for (var i = 0; i < arr.length; i++) {

            se2.appendChild(arr[i]);

        }

    }

</script>

</body>

</html>

JS——选择水果的更多相关文章

  1. vue.js选择if（条件渲染）详解

    vue.js选择if(条件渲染)详解 一.总结 一句话总结: v-if <!DOCTYPE html> <html lang="en"> <head& ...

  2. js选择目录

    找了好久,终于找到了! function browseFolder(path) {//打开本地目录(目录选择功能) try { var Message = "\u8bf7\u9009\u62 ...

  3. 【 D3.js 选择集与数据详解 — 5 】 处理模板的应用

    在[选择集与数据 - 4]一文中,介绍了一个update.enter.exit的处理模板,这个模板很常用,本文将通过一个例子来讲解其使用方法. 1. 模板 复习一下上一章提到的模板. //绑定数据后, ...

  4. 【 D3.js 选择集与数据详解 — 4 】 enter和exit的处理方法以及处理模板

    绑定数据之后,选择集分为三部分:update.enter.exit.这三部分的处理办法是什么呢?本文将讲解其处理方法,以及一个常用的处理模板. 1. enter的处理方法 如果没有足够的元素,那么处理 ...

  5. 【 D3.js 选择集与数据详解 — 3 】 绑定数据的顺序

    data() 函数有两个参数,第一个是被绑定数据,第二个参数用于指定绑定的顺序.在数据需要更新的时候常常会用到. 默认的情况下,data()函数是按照索引号依次绑定数组各项的.第0个元素绑定数组的第0 ...

  6. 【 D3.js 选择集与数据详解 — 2 】 使用data()绑定数据

    D3 中绑定数据大多是由 data() 函数来完成的,它是怎样工作的,它与 datum() 有什么区别呢? data()函数能够将数组各项分别绑定到各元素上,而且能够设置绑定的规则.data()还能够 ...

  7. 【 D3.js 选择集与数据详解 — 1 】 使用datum()绑定数据

    选择集和数据的关系是 D3 最重要的基础,在[入门 - 第 7 章]时进行过些许讲解,对于要掌握好 D3 是远远不够的.故此开设一个新的分类,专门讨论选择集与数据的关系,包括数据绑定的使用和工作原理, ...

  8. （二）js选择结构

    1.js的执行顺序. a)    一般按照书写的顺序来执行. b)    另外一种是通过判断然后执行下一项语句. 注:一般讲js语句写在body内容的最后来执行. 2.js的结构 a)    顺序结构 ...

  9. 【Node.js】2.开发Node.js选择哪个IDE 开发工具呢

    安装完Node.js之后,就要为它选择一个有利的IDE用于开发. 相比较了多个IDE之后,定位在webstrom和sublime上. 有一个简单的比较: webstorm功能很丰富,前端开发工具的集大 ...

随机推荐

  1. [K/3Cloud]调用动态表单时,传递自定义参数

    插件中在调用动态表单时,通过DynamicFormShowParameter的CustomParams,增加自定义的参数. private void ShowMaterialStock() { obj ...

  2. 矩形面积求并（codevs 3044）

    题目描述 Description 输入n个矩形,求他们总共占地面积(也就是求一下面积的并) 输入描述 Input Description 可能有多组数据,读到n=0为止(不超过15组) 每组数据第一行 ...

  3. mcp2515 芯片驱动总线错误BUG的解决方法

    http://blog.renren.com/share/221002615/11483613167 来自张涛的日志 现象:CAN总线在线上设备热插拔或长时间运行后出现总线异常情况,有时不能发送和接收 ...

  4. SecureCRT 8.0公布

    百度搜索到的7.3 注冊码生成器还是能够用于8.0的破解. 破解时,选择手动输入(Enter Licence Manually)产生的代码. 添加了一些特性,我最看重的是: 1.  能够在以下命令窗体 ...

  5. C++学习之动态数组类的封装

    动态数组(Dynamic Array)是指动态分配的.可以根据需求动态增长占用内存的数组.为了实现一个动态数组类的封装,我们需要考虑几个问题:new/delete的使用.内存分配策略.类的四大函数(构 ...

  6. Batch 拷贝远程机器文件到本机指定目录下

    net use * /del /yesNET USE Y: \\远程机IP\d$  登录密码 /user:domain\登录用户 set sourcePath="Y:\DOAutomatio ...

  7. B1877 [SDOI2009]晨跑 费用流

    其实之前写过一个板子,但是一点印象都没有,所以今天重写了一下,顺便把这个题当成板子就行了. 其实费用流就是把bfs换成spfa,但是中间有一个原则,就是费用优先,在费用(就是c)上跑spfa,顺便求出 ...

  8. JSP-Runood：JSP 客户端请求

    ylbtech-JSP-Runood:JSP 客户端请求 1.返回顶部 1. JSP 客户端请求 当浏览器请求一个网页时,它会向网络服务器发送一系列不能被直接读取的信息,因为这些信息是作为HTTP信息 ...

  9. PCB SQL SERVER 发送邮件(异步改同步)

    采用SQL SERVER发送邮件是队列方式(异步)发送邮件,所以在我们执行发送邮件后,无法立即获取到邮件是否发送成功了,而在PCB行业实际应用中是需要立即获取发送邮件是否成功的状态来决定下一步逻辑该如 ...

  10. kindeditor上传文件的使用

    在线富文本编辑器kindeditor配置(.Net Framework 3.5)   下载地址:http://kindeditor.net/down.php 解压放在项目要目录下, 在Bin目录下添加 ...