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

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

具体如下：

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

  
    
    
    
    
      $(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();
        });
      });
    
  
  
    

      
        电影0
        电影1
        电影2
        电影3
        电影4
        电影5
      
      " />
      >>" />
      
      
      
        电影6
        电影7
        电影8
        电影9
      
    
  

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

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

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