jQuery实现左右两个列表框的内容相互移动功能示例


Posted in jQuery onJanuary 27, 2019

本文实例讲述了jQuery实现左右两个列表框的内容相互移动功能。分享给大家供大家参考,具体如下:

在jQuery中将左右两个列表框的内容相互移动,移动的同时进行删除,这里只是给大家写一个入门的小案例,今后写相同的功能思路也是一样的。仅供新手们的一个参考。希望能给那些跟我一样在菜鸟路上不断奋斗的人一些灵感,尽早入门。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>3water.com jQuery列表数据移动</title>
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    <script type="text/javascript">
      $(document).ready(function(){
        //将左边数据移动到右边
        $("#right").click(function(){
        //将左边option中选中的值赋给vSelect变量
        var vSelect=$("#leftSelect option:selected");
        //将数据添加到rightSelect中
        vSelect.clone().appendTo("#rightSelect");
        //同时删除leftSelect中的数据
        vSelect.remove();
        });
        //将右边数据移动到左边
        $("#left").click(function(){
          var vSelect=$("#rightSelect option:selected");
          //将右边的数据追加到左边列表中
          vSelect.clone().appendTo("#leftSelect");
          vSelect.remove();
        });
        //将左边全部数据移到右边
        $("#rightAll").click(function(){
          $("#rightSelect").append($("#leftSelect>option"));
          $("#leftSelect>option").remove();
        });
        //将右边数据全部移到左边
        $("#leftAll").click(function(){
          $("#leftSelect").append($("#rightSelect>option"));
          $("#rightSelect>option").remove();
        });
      });
    </script>
  </head>
  <body>
    <div>
      <select id="leftSelect" multiple="multiple" style="height: 200px;width: 200px;">
        <option value="0">电影0</option>
        <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>
      </select>
      <input type="button" id="right" value=">" />
      <input type="button" id="rightAll" value=">>>" />
      <input type="button" id="left" value="<" />
      <input type="button" id="leftAll" value="<<<" />
      <select id="rightSelect" multiple="multiple" style="height: 200px;width: 200px;">
        <option value="6">电影6</option>
        <option value="7">电影7</option>
        <option value="8">电影8</option>
        <option value="9">电影9</option>
      </select>
    </div>
  </body>
</html>

这里使用在线HTML/CSS/JavaScript代码运行工具:http://tools.3water.com/code/HtmlJsRun测试上述代码,可看到如下运行效果:

jQuery实现左右两个列表框的内容相互移动功能示例

希望本文所述对大家jQuery程序设计有所帮助。

jQuery 相关文章推荐
jQuery实现的背景颜色渐变动画效果示例
Mar 24 jQuery
jQuery实现动态生成表格并为行绑定单击变色动作的方法
Apr 17 jQuery
关于jQuery.ajax()的jsonp碰上post详解
Jul 02 jQuery
详解jQuery中关于Ajax的几个常用的函数
Jul 17 jQuery
jQuery实现的粘性滚动导航栏效果实例【附源码下载】
Oct 19 jQuery
20个最常见的jQuery面试问题及答案
May 23 jQuery
jQuery动态操作表单示例【基于table表格】
Dec 06 jQuery
jQuery AJAX与jQuery事件的分析讲解
Feb 18 jQuery
jquery分页优化操作实例分析
Aug 23 jQuery
jquery传参及获取方式(两种方式)
Feb 13 jQuery
jquery实现轮播图特效
Apr 12 jQuery
jQuery插件实现图片轮播效果
Oct 19 jQuery
jQuery实现模拟搜索引擎的智能提示功能简单示例
Jan 27 #jQuery
jQuery实现表格的增、删、改操作示例
Jan 27 #jQuery
jQuery实现当拉动滚动条到底部加载数据的方法分析
Jan 24 #jQuery
Jquery的Ajax技术使用方法
Jan 21 #jQuery
jQuery移动端跑马灯抽奖特效升级版(抽奖概率固定)实现方法
Jan 18 #jQuery
jquery获取file表单选择文件的路径、名字、大小、类型
Jan 18 #jQuery
jQuery实现适用于移动端的跑马灯抽奖特效示例
Jan 18 #jQuery
You might like
php的sprintf函数的用法 控制浮点数格式
2014/02/14 PHP
php中addslashes函数与sql防注入
2014/11/17 PHP
php从数据库读取数据,并以json格式返回数据的方法
2018/08/21 PHP
CentOS7编译安装php7.1的教程详解
2019/04/18 PHP
PHP实现一个限制实例化次数的类示例
2019/09/16 PHP
浅谈thinkphp的nginx配置,以及重写隐藏index.php入口文件方法
2019/10/12 PHP
jquery中$.post()方法的简单实例
2014/02/04 Javascript
防止Node.js中错误导致进程阻塞的办法
2016/08/11 Javascript
js防阻塞加载的实现方法
2016/09/09 Javascript
node.js 用socket实现聊天的示例代码
2017/10/17 Javascript
vue+element-ui动态生成多级表头的方法
2018/08/28 Javascript
Node.js API详解之 module模块用法实例分析
2020/05/13 Javascript
[01:14]英雄,所敬略同——2018完美盛典宣传视频4K
2018/12/05 DOTA
Python 返回汉字的汉语拼音
2009/02/27 Python
举例讲解如何在Python编程中进行迭代和遍历
2016/01/19 Python
python XlsxWriter模块创建aexcel表格的实例讲解
2018/05/03 Python
对Python+opencv将图片生成视频的实例详解
2019/01/08 Python
对python中矩阵相加函数sum()的使用详解
2019/01/28 Python
解决python线程卡死的问题
2019/02/18 Python
python中对数据进行各种排序的方法
2019/07/02 Python
初次部署django+gunicorn+nginx的方法步骤
2019/09/11 Python
Python实现一个简单的递归下降分析器
2020/08/01 Python
利用canvas实现图片下载功能来实现浏览器兼容问题
2019/05/31 HTML / CSS
Canvas globalCompositeOperation
2018/12/18 HTML / CSS
加拿大奢华时装品牌:Mackage
2018/01/10 全球购物
CK巴西官方网站:Calvin Klein巴西
2019/07/19 全球购物
美国围栏公司:Walpole Outdoors
2019/11/19 全球购物
英国最好的包装供应商:Priory Direct
2019/12/17 全球购物
销售人员个人求职信
2013/09/26 职场文书
大门门卫岗位职责
2013/11/30 职场文书
投标邀请书范文
2014/01/31 职场文书
侵犯商业秘密的律师函
2015/05/27 职场文书
迎新年主持词
2015/07/06 职场文书
2015秋季开学典礼新闻稿
2015/07/17 职场文书
高中运动会前导词
2015/07/20 职场文书
2019送给家人们的中秋节祝福语
2019/08/15 职场文书