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

这篇文章主要介绍了jQuery如何实现左右两个列表框的内容相互移动功能，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。

成都创新互联制作网站网页找三站合一网站制作公司,专注于网页设计,网站建设、成都网站制作,网站设计,企业网站搭建,网站开发,建网站业务,680元做网站,已为近千家服务,成都创新互联网站建设将一如既往的为我们的客户提供最优质的网站建设、网络营销推广服务!

具体如下：

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

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>www.jb51.net 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" >
        <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" >
        <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.jb51.net/code/HtmlJsRun测试上述代码，可看到如下运行效果：

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

jquery是什么

jquery是一个简洁而快速的JavaScript库，它具有独特的链式语法和短小清晰的多功能接口、高效灵活的css选择器，并且可对CSS选择器进行扩展、拥有便捷的插件扩展机制和丰富的插件，是继Prototype之后又一个优秀的JavaScript代码库，能够用于简化事件处理、HTML文档遍历、Ajax交互和动画，以便快速开发网站。

感谢你能够认真阅读完这篇文章，希望小编分享的“jQuery如何实现左右两个列表框的内容相互移动功能”这篇文章对大家有帮助，同时也希望大家多多支持创新互联，关注创新互联行业资讯频道，更多相关知识等着你来学习!

分享题目：jQuery如何实现左右两个列表框的内容相互移动功能
网址分享：https://www.cdcxhl.com/article48/jeeghp.html

成都网站建设公司_创新互联，为您提供服务器托管、移动网站建设、外贸建站、手机网站建设、定制网站、网站收录

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源：创新互联

猜你还喜欢下面的内容