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. selenium+python操作浏览器

    前面已经把环境搭建好了,下面我们就正式学习selenium的webdriver框架.本篇主要讲如何用Python调用webdriver框架的API,对浏览器做一些基本的操作,如打开.前进.后退.刷新. ...

  2. linux curl 的用法指南

    curl用法指南

  3. 微信小程序授权登录将open_id传至后台并入库

    要求能把用户昵称.头像以及open_id写入数据库,服务端保持用户登录状态 wxml: <block wx:else> <button type="primary" ...

  4. egg-jwt的使用

    安装 npm install egg-jwt --save 配置 // config/config.default.js config.jwt = { secret: 'zidingyi', // 自 ...

  5. Nginx解决跨域问题No 'Access-Control-Allow-Origin'

    使用nginx在server块下的location块下为请求添加请求头来解决跨域 add_header 'Access-Control-Allow-Origin' '*'; add_header 'A ...

  6. springcloud报错-Ribbon整合Eureka，出现 No instances available for XXX 异常

    RestTemplate注入有问题 新版的需要这样注入: @Bean @LoadBalanced RestOperations restTemplate(RestTemplateBuilder bui ...

  7. Kafka的优秀设计学习

    一.Kafka基础 消息系统的作用 应该大部份小伙伴都清楚,用机油装箱举个例子 所以消息系统就是如上图我们所说的仓库,能在中间过程作为缓存,并且实现解耦合的作用. 引入一个场景,我们知道中国移动,中国 ...

  8. oracle 中有数据但是sql查询不出来结果（中文）

    如 select * from user where name like '%王%': 无数据: 而数据库中确实有姓王的用户. 配置环境变量 NLS_LANG = AMERICAN_AMERICA.A ...

  9. 使用gdb

    1.设置断点,在源程序第16 行处 (gdb)break 16 Breakpoint 1 at 0x8048496: file tst.c, line 16. 2.设置断点,在函数func()入口处. ...

  10. 74CMS 3.0任意文件写入漏洞

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