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. mybatis介绍--基于个人学习JavaWeb的使用

    mybatis介绍 该博文放在javaWeb系列下,目的是记录我们javaWeb阶段所学的知识 @time=2022/3/11/11:52(最近休息玩了两天,今天重新启动生活) 一.mybatis发展 ...

  2. Yaconf-配置管理扩展

    1.下载yaconf安装包git clone https://github.com/laruence/yaconf.git2.目录切换至yaconf,编译生成so 文件(找到你的phpize位置) / ...

  3. php 23种设计模式 - 责任链模式

    责任链模式 责任链模式(Chain of Responsibility Pattern)为请求创建了一个接收者对象的链.这种模式给予请求的类型,对请求的发送者和接收者进行解耦.这种类型的设计模式属于行 ...

  4. AngularJS集成富文本编辑器

    最近在Angular中需要集成富文本编辑器,本来已经集成好百度的UEditor,后台觉得配置太多,让我弄个别的,然后就找到了wangEditor,这个配置和上手都要简单一些,下面来看看具体操作步骤吧: ...

  5. java.sql.SQLException: Unable to load authentication plugin 'caching_sha2_password'.

    原来是mysql5.X,升级到8.X,连接数据库就报错: Unable to load authentication plugin 'caching_sha2_password'. 原因分析: 可能为 ...

  6. emu8086 调用LED面板的方法

    一.实验要求 1．熟悉并掌握 EMU8086 汇编语言调试环境: 2．学习 8086 的指令系统,输入简单的指令,观察各寄存器.内存相关单元以及处理器标志位的变化(所有数据传送类指令,可参考教材用例) ...

  7. Apache BeanUtils与Spring BeanUtils性能比较

    在我们实际项目开发过程中,我们经常需要将不同的两个对象实例进行属性复制,从而基于源对象的属性信息进行后续操作,而不改变源对象的属性信息,比如DTO数据传输对象和数据对象DO,我们需要将DO对象进行属性 ...

  8. Mybatis传递参数的几种方式

    使用Map传递 优点:直接在sql中取出key即可 缺点:适用于小项目,不符合大公司规范 对象传递参数 优点:符合标准规范 缺点:麻烦 3.只有一个基本类型参数的情况下,直接在sql中取中 4.多个参 ...

  9. 6月15日 python学习总结 Django模板语言相关内容

    Django模板语言相关内容   Django模板系统 官方文档 常用语法 只需要记两种特殊符号: {{  }}和 {% %} 变量相关的用{{}},逻辑相关的用{%%}. 变量 {{ 变量名 }} ...

  10. phpcms 2008 变量覆盖漏洞

    一. 启动环境 1.双击运行桌面phpstudy.exe软件 2.点击启动按钮,启动服务器环境 二.代码审计 1．双击启动桌面Seay源代码审计系统软件 3．点击新建项目按钮,弹出对画框中选择(C:\ ...