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实现动态给table赋值的方法示例
Jul 04 jQuery
jQuery实现IE输入框完成placeholder标签功能的方法
Sep 20 jQuery
jquery实现左右轮播图效果
Sep 28 jQuery
jQuery选择器之属性过滤选择器详解
Sep 28 jQuery
jQuery除指定区域外点击任何地方隐藏DIV功能
Nov 13 jQuery
jQuery获取所有父级元素及同级元素及子元素的方法(推荐)
Jan 21 jQuery
详解jQuery中的isPlainObject()使用方法
Feb 27 jQuery
Easyui 去除jquery-easui tab页div自带滚动条的方法
May 10 jQuery
jQuery HTML获取内容和属性操作实例分析
May 20 jQuery
jQuery 移除事件的方法
Jun 20 jQuery
jQuery实现穿梭框效果
Jan 19 jQuery
jQuery实现影院选座订座效果
Apr 13 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的curl封装类用法实例
2014/11/07 PHP
原生php实现excel文件读写的方法分析
2018/04/25 PHP
HTML5如何适配 iPhone IOS 底部黑条
2021/03/09 HTML / CSS
DOM精简教程
2006/10/03 Javascript
js数字转换为float,取N位小数
2014/02/08 Javascript
jquery ajax应用中iframe自适应高度问题解决方法
2014/04/12 Javascript
js获取日期:昨天今天和明天、后天
2014/06/11 Javascript
Javascript中数组方法汇总(推荐)
2015/04/01 Javascript
基于vue2.0+vuex的日期选择组件功能实现
2017/03/13 Javascript
js实现前端图片上传即时预览功能
2017/08/02 Javascript
vue.js语法及常用指令
2017/10/29 Javascript
深入理解Vue官方文档梳理之全局API
2017/11/22 Javascript
Bootstrap Table实现定时刷新数据的方法
2018/08/13 Javascript
Vue CLI3 开启gzip压缩文件的方式
2018/09/30 Javascript
小程序实现选择题选择效果
2018/11/04 Javascript
Python挑选文件夹里宽大于300图片的方法
2015/03/05 Python
初步理解Python进程的信号通讯
2015/04/09 Python
python和bash统计CPU利用率的方法
2015/07/10 Python
Django中Middleware中的函数详解
2019/07/18 Python
python 画出使用分类器得到的决策边界
2019/08/21 Python
Python使用gluon/mxnet模块实现的mnist手写数字识别功能完整示例
2019/12/18 Python
python实现将json多行数据传入到mysql中使用
2019/12/31 Python
python sorted函数原理解析及练习
2020/02/10 Python
python中的selenium安装的步骤(浏览器自动化测试框架)
2020/03/17 Python
python实现遍历文件夹图片并重命名
2020/03/23 Python
python 安装库几种方法之cmd,anaconda,pycharm详解
2020/04/08 Python
2分钟教你实现环形/扇形菜单(基础版)
2020/01/15 HTML / CSS
英国知名奢侈品包包品牌:Milli Millu
2016/12/22 全球购物
Manuka Doctor美国官网:麦卢卡蜂蜜和蜂毒护肤
2016/12/25 全球购物
英国和世界各地预订便宜的酒店:LateRooms.com
2019/05/05 全球购物
个人找工作自荐信格式
2013/09/21 职场文书
表扬信格式模板
2015/05/05 职场文书
先进工作者主要事迹材料
2015/11/03 职场文书
2016公务员年度考核评语
2015/12/01 职场文书
英语版自我评价,35句话轻松搞定
2019/10/08 职场文书
windows系统搭建WEB服务器详细教程
2022/08/05 Servers