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. 矩池云利用ipykernel为JupyterLab添加kernel以及展示出来

    source activate myconda pip install ipykernel python -m ipykernel install --user --name myconda --di ...

  2. egg中使用sequelize事务，实现原子性

    let transaction; try { // 建立事务对象 transaction = await this.ctx.model.transaction(); const house = awa ...

  3. LGP3281口胡

    当你看到一个东西的时候,GF 有可能比 DP 更方便.处理贡献也有可能比 DP 更方便. 这个题意明显是让我们计算 \(S(r)-S(l-1)\) 之类的东西( 所以直接考虑前缀的答案就好了( 考虑将 ...

  4. powerful number筛

    心血来潮跑来实现以下这个东西 我们应该知道杜教筛的理论是 \(f * g=h\),那么问题在于如何找 \(g\). 之前的blog应该提到过可以令 \(g(p)=-f(p)\),这样一来 \(h\) ...

  5. Ubuntu 11.04 LAMP+JSP环境安装过程

    安装LAMP命令:sudo apt-get install apache2 php5 libapache2-mod-php5 mysql-server libapache2-mod-auth-mysq ...

  6. Cobalt Strike的安装

    一.下载 压缩包下载回来之后,可以看到里面的文件有这些: 其中搭建团队服务器端的关键文件有两个,一个是cobaltstrike.jar,另一个是teamserver,这里我打算将团队服务器端搭在我的v ...

  7. python练习册 每天一个小程序 第0001题

    1 # -*-coding:utf-8-*- 2 __author__ = 'Deen' 3 ''' 4 题目描述: 5 做为 Apple Store App 独立开发者,你要搞限时促销,为你的应用生 ...

  8. S120通讯报文应用类型及区别，PZD格式及意义 | 标准报文1/2/3/4/5/6/7/9/20/81/82/83，西门子报文

    一.报文功能图 1.1标准报文 适用于驱动器 SINAMICS S120 S150 参数手册 章节3.9 PROFIdrive 图3-36 功能图2415标准报文和过程数据1 SINAMICS S12 ...

  9. S120的基本定位功能

    转自:https://support.industry.siemens.com/cs/document/84136148/s120%E7%9A%84%E5%9F%BA%E6%9C%AC%E5%AE%9 ...

  10. 知识点简单总结——FWT(快速沃尔什变换),FST(快速子集变换)

    知识点简单总结--FWT(快速沃尔什变换),FST(快速子集变换) 闲话 博客园的markdown也太傻逼了吧. 快速沃尔什变换 位运算卷积 形如 $ f[ i ] = \sum\limits_{ j ...