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+ThinkPHP+Ajax实现即时消息提醒功能实例代码
Mar 21 jQuery
jQuery 利用ztree实现树形表格的实例代码
Sep 27 jQuery
jQuery实现的点击图片居中放大缩小功能示例
Jan 16 jQuery
简单易扩展可控性强的Jquery转盘抽奖程序
Mar 16 jQuery
jquery.tagsinput.js实现记录checkbox勾选的顺序
Sep 21 jQuery
jQuery利用cookie 实现本地收藏功能(不重复无需多次命名)
Nov 07 jQuery
jQuery实现全选、反选和不选功能的方法详解
Dec 04 jQuery
jQuery实现消息弹出框效果
Dec 10 jQuery
jQuery单页面文字搜索插件jquery.fullsearch.js的使用方法
Feb 04 jQuery
jQuery实现中奖播报功能(让文本滚动起来) 简单设置数值即可
Mar 20 jQuery
Jquery+javascript实现支付网页数字键盘
Dec 21 jQuery
jQuery+ajax实现文件上传功能
Dec 22 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 APC的安装与使用详解
2013/06/13 PHP
讲解WordPress开发中一些常用的debug技巧
2015/12/18 PHP
PHP中include和require的区别实例分析
2017/05/07 PHP
浅析PHP中的闭包和匿名函数
2017/12/25 PHP
PHP大文件切割上传并带进度条功能示例
2019/07/01 PHP
Yii框架的布局文件实例分析
2019/09/04 PHP
如何判断图片地址是否失效
2007/02/02 Javascript
jQuery select控制插件
2009/08/17 Javascript
JS控制一个DIV层在指定时间内消失的方法
2014/02/17 Javascript
Javascript中的回调函数和匿名函数的回调示例介绍
2014/05/12 Javascript
JS实现横向与竖向两个选项卡Tab联动的方法
2015/09/27 Javascript
用JavaScript获取页面文档内容的实现代码
2016/06/10 Javascript
AngularJS入门教程之XHR和依赖注入详解
2016/08/18 Javascript
bootstrap日期控件问题(双日期、清空等问题解决)
2017/04/19 Javascript
VueJs监听window.resize方法示例
2018/01/17 Javascript
详解vue项目中如何引入全局sass/less变量、function、mixin
2018/06/02 Javascript
详解jQuery中的easyui
2018/09/02 jQuery
浅析Vue.js 中的条件渲染指令
2018/11/19 Javascript
vue项目创建步骤及路由router
2020/01/14 Javascript
python 测试实现方法
2008/12/24 Python
python求众数问题实例
2014/09/26 Python
疯狂上涨的Python 开发者应从2.x还是3.x着手?
2017/11/16 Python
tensorflow 加载部分变量的实例讲解
2018/07/27 Python
python实现自动登录
2018/09/17 Python
对python过滤器和lambda函数的用法详解
2019/01/21 Python
python3 sorted 如何实现自定义排序标准
2020/03/12 Python
基于PyTorch的permute和reshape/view的区别介绍
2020/06/18 Python
瑰珀翠美国官网:Crabtree & Evelyn美国
2016/11/29 全球购物
shell程序中如何注释
2012/01/28 面试题
通信专业个人自我鉴定
2013/10/21 职场文书
网站美工岗位职责
2014/04/02 职场文书
小区门卫的岗位职责
2014/09/26 职场文书
给老婆的保证书怎么写
2015/05/08 职场文书
元旦晚会开场白
2015/05/29 职场文书
歌舞青春观后感
2015/06/10 职场文书
2019中秋节祝福语大全,提前收藏啦
2019/09/10 职场文书