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. Laravel-Auth认证

    1.建立数据表 admins 2.找到config下的auth.php 文件,加入如下代码 <?php return [ /* |-------------------------------- ...

  2. phpStudy 升级 MySQL5.7

    最新在开发项目中需要使用到mysql5.7以上版本,但是phpStudy的版本是5.5,所以需要针对MySQL升级一下 步骤  1.备份原本MySQL 备份:原本phpStudy中的MySQL文件夹改 ...

  3. 【简记】Linux界面连接WPA2-Enterprise Wifi

    背景 公司从去年(2021)年开始使用 WPS2-Enterprise 安全方式,我的笔记本来公司就得用网线才能连(因为当时没意识到,只是以为连不上可能和驱动有关系,这是大错特错的理解..)赶上今天去 ...

  4. 面试官：Redis如何实现持久化的、主从哨兵又是什么？

    哈喽!大家好,我是小奇,一位不靠谱的程序员 小奇打算以轻松幽默的对话方式来分享一些技术,如果你觉得通过小奇的文章学到了东西,那就给小奇一个赞吧 文章持续更新 一.前言 作为一名Java程序员,Redi ...

  5. 总结一下Java基础知识

    重中之重-----------基础 底层结构决定上层建筑,所以,基础很重要. 自信心 在开始说基础之前先说明一下自信心的重要性,没有自信心学什么东西都学不好. 核心自信***** 核心自信从三个方面来 ...

  6. 金蝶 K3 WISE 服务器必须登陆到桌面以后用户才能正常使用解决！

    我们单位K3的系统,由当地的服务商安装完以后就出现各种蛋疼的问题.做技术支持的小伙他总是会给一个小工具来解决,问他是什么原因要么说我的网络有问题,要么说我们的服务器有问题. K3所有客户端无法登陆一键 ...

  7. CF1534F1题解

    首先,对于一个在第 \(i\) 行 \(j\) 列的沙子,如果他开始下降,他能够使哪些沙子下降呢? 很容易得知是第 \(j-1,j,j+1\) 列所有行号不小于 \(i\) 的沙子. 对于沙子 \(u ...

  8. ROS第一次课作业分享

    ROS第一次课作业分享 2021年夏季学期学院开设了ROS的相关课程,最近在复习相关知识,正好做一下整理.下面是第一次作业的要求: 编写一个ROS节点,具备以下功能: 读取小海龟仿真器的/turtle ...

  9. git error: unable to create file Invalid argument

    git error: unable to create file xxxx  Invalid argument 原因: mac  上创建的文件名里有冒号,这在windows 上是不允许的. 解决方式: ...

  10. python学习之matplotlib实战2

    import numpy as np import matplotlib.pyplot as plt def main(): #scatter fig = plt.figure() ax = fig. ...