JS 实现列表移动

学习内容：

需求

用 JS 实现列表移动

实现代码

<html>

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

    <title>列表移动</title>

    <script type="text/javascript" src="/static/jQuery-1.11/jquery-1.11.3.min.js">

    </script>

    <script>

        function moveAll(srcId, targetId) {

            // （'#' + targetId）拼接字符串

            $('#' + targetId).append($("#" + srcId + " > option"));

        }

        function moveSelected(srcId, targetId) {

            // （'#' + targetId）拼接字符串

            $('#' + targetId).append($('#' + srcId + ' > option:selected'));

        }

    </script>

</head>

<body>

<table border="1">

    <tr>

        <td>

            <select id="select1" style="width:100px;height:200px" size="10"

                    multiple="multiple">

                <option value="选项1">选项1</option>

                <option value="选项2">选项2</option>

                <option value="选项3">选项3</option>

                <option value="选项4">选项4</option>

                <option value="选项5">选项5</option>

                <option value="选项6">选项6</option>

                <option value="选项7">选项7</option>

                <option value="选项8">选项8</option>

                <option value="选项9">选项9</option>

            </select>

        </td>

        <td align="center">

            <input type="button" onclick="moveSelected('select1','select2')"

                   value="-->"/><br/>

            <input type="button" onclick="moveAll('select1','select2')"

                   value="==>"/><br/>

            <input type="button" onclick="moveSelected('select2','select1')"

                   value="<--"/><br/>

            <input type="button" onclick="moveAll('select2','select1')"

                   value="<=="/>

        </td>

        <td>

            <select id="select2" style="width:100px;height:200px" size="10"

                    multiple="multiple"></select>

        </td>

    </tr>

</table>

</body>

</html>

总结：

以上就是用 JS 实现列表移动，代码的简单实现了，仅供参考，欢迎讨论交流。

JS 实现权限列表移动的更多相关文章

  1. zTree实现权限列表简单实例

    zTree的简单实例 zTree 是一个依靠jQuery 实现的多功能 "树插件".优异的性能.灵活的配置.多种功能的组合是 zTree 最大优点. zTree官网 zTreeAP ...

  2. 用c#开发微信 (19) 公众平台接口权限列表说明 - 订阅号、服务号认证后的区别

    最新发现有些原来认证服务号的权限对认证的订阅号开放了,这里是官方的文档说明<公众平台接口权限列表说明>,明显比这里说得详细.准确多了<微信公众平台服务号.订阅号的相关说明>.另 ...

  3. 解决在iOS8环境下,当用户关闭定位服务总开关时,无法将APP定位子选项加入定位权限列表的问题

    关键点:- (void)locationManager:(CLLocationManager *)manager didChangeAuthorizationStatus:(CLAuthorizati ...

  4. Android权限列表permission说明

    网络上不乏android权限列表,但是很少有将列表和使用方法放在一起的,所以特此总结一下 需要在AndroidManifest.xml中定义相应的权限(以获取internet访问权限为例),如下: & ...

  5. android权限列表

    原文:[转]android权限列表 访问登记属性 android.permission.ACCESS_CHECKIN_PROPERTIES ,读取或写入登记check-in数据库属性表的权限 获取错略 ...

  6. 原生js移动端列表无缝间歇向上滚动

    在项目开发中尤其是在项目的活动页面的开发中,经常需要将用户的购买信息或中奖信息等以列表的形式展示在页面当中,并可以使其自动间歇向上滚动来达到在有限的区域内展示所有信息的目的.通常的做法是通过将列表父元 ...

  7. permission 权限 列表 6.0 运行时【案例】

    demo地址:https://github.com/baiqiantao/PermissionTest.git <uses-permission android:name="andro ...

  8. 分享JQuery动画插件Velocity.js的六种列表加载特效

    分享JQuery动画插件Velocity.js的六种列表加载特效.在这款实例中给中六种不同的列表加载效果.分别为从上飞入.从右侧飞入.从左侧飞入.和渐显.一起看下效果图: 在线预览   源码下载 实现 ...

  9. js 验证ip列表

    如题. <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title ...

随机推荐

  1. Java 将XML转为PDF

    可扩展标记语言(XML)文件是一种标准的文本文件,它使用特定的标记来描述文档的结构以及其他特性.通过将XML转换为PDF,能够便于文件传输及共享.本文,将介绍通过Java代码来实现该格式转换的方法. ...

  2. 测试平台系列(90) 编写oss客户端

    大家好~我是米洛! 我正在从0到1打造一个开源的接口测试平台, 也在编写一套与之对应的教程,希望大家多多支持. 欢迎关注我的公众号米洛的测开日记,获取最新文章教程! 回顾 上一节我们编写了在线执行测试 ...

  3. linux tr命令实现windows文本格式与linux文本格式间的转换

    tr 命令 转换和删除字符 选项: -d --delete:删除字符 -s --squeeze-repeats:把连续重复的字符以一个字符表示,即去重 -c –C --complement:取字符集的 ...

  4. tp5手机号验证码发送及验证

    原文链接:https://blog.csdn.net/weixin_43389208/article/details/119153323 为什么使用短信: 场景:通常在使用手机号注册时需要发送短信验证 ...

  5. 认识变量（python）

    一.变量定义 1.1使用规范:先定义,后使用 1.2由三部分组成:变量名,赋值符号,变量值 1.3定义变量就是申请一个内存空间,python内部优化机制,对于数据量小的申请,就不重复开内存空间 二.变 ...

  6. 74CMS 3.0 任意文件删除漏洞

    一. 启动环境 1.双击运行桌面phpstudy.exe软件 2.点击启动按钮,启动服务器环境 二.代码审计 1．双击启动桌面Seay源代码审计系统软件 2．因为74CMS3.0源代码编辑使用GBK编 ...

  7. linux下安装简单的文件上传与下载工具 lrzsz

    编译安装 1.从下面的网站下载 lrzsz-1.12.20.tar.gz wget https://ohse.de/uwe/releases/lrzsz-0.12.20.tar.gz 2.查看里面的I ...

  8. FOC中的电流采样

    电流采样是FOC的基础,具体有电流传感器采样.电阻采样,电阻采样以其简单低成本的应用广泛使用. 电阻法采样有单电阻采样.双电阻采样.三电阻采样. 一． 单电阻采样 单电阻采用分时采样,在一个PWM周期 ...

  9. 22.2.14session和反反爬处理

    22.2.14 session和反反爬处理 1.session: requests库包含session,都是用来对一个url发送请求,区别在于session是一连串的请求,在session请求过程中c ...

  10. 一个关于wait/notify与锁关系的探究

    wait/notify 机制是解决生产者消费者问题的良药.它的核心逻辑是基于条件变量的锁机制处理.所以,它们到底是什么关系?wait()时是否需要持有锁? notify()是否需要持有锁?先说答案:都 ...