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

2024-12-21 12:01:55

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

在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" 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.jb51.net/code/HtmlJsRun测试上述代码，可看到如下运行效果：

更多关于jQuery相关内容感兴趣的读者可查看本站专题：《jQuery页面元素操作技巧汇总》、《jQuery常见事件用法与技巧总结》、《jQuery常用插件及用法总结》、《jQuery扩展技巧总结》及《jquery选择器用法总结》

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

利用jquery操作select下拉列表框的代码

例: 复制代码代码如下: <select id="sltList" name="list"> <option value="1">张三</option> <option value="2">李四</option> </select> // 获取当前选中的option值 $('#sltList').val() //获取当前选中项的文本 $('#sltLis
jQuery 操作下拉列表框实现代码

<select name="select1" id="select1" size="10"> <option value="1">Option1</option> <option valeu="2">Option2</option> <option value="3">Option3</option> &
JS,Jquery获取select,dropdownlist,checkbox下拉列表框的值(示例代码)

jQuery获取Select选择的Text和Value: 语法解释: 1. $("#select_id").change(function(){//code...}); //为Select添加事件,当选择其中一项时触发 2. var checkText=$("#select_id").find("option:selected").text(); //获取Select选择的Text 3. var checkValue=$("#se
jquery移动点击的项目到列表最顶端的方法

本文实例讲述了jquery移动点击的项目到列表最顶端的方法.分享给大家供大家参考.具体实现方法如下: <ul> <li>one</li> <li>two</li> <li>three</li> </ul> 如果点击two,则two这一行会移动到列表的最上方 $("li").click(function() { $(this).parent().prepend($(this)); }); 希望
jQuery实现可移动选项的左右下拉列表示例

本文实例讲述了jQuery实现可移动选项的左右下拉列表.分享给大家供大家参考,具体如下: 运行效果图如下: 完整代码如下: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <style type="text/css">
jQuery+CSS3折叠卡片式下拉列表框实现效果

jQuery下拉列表框特效将每一个列表项都制作为卡片的样式,打开和关闭它有打开和关闭百叶窗的感觉,效果非常不错,分享给大家. 简要教程 HTML结构该下拉列表框特效的列表项使用一个无序列表来制作,用于切换打开和关闭状态的元素是一个超链接元素. <div class="container"> <div class="card-drop"> <a class='toggle' href="#"> <i cl
PHP+Mysql+jQuery查询和列表框选择操作实例讲解

本文讲解如何通过ajax查询mysql数据,并将返回的数据显示在待选列表中,再通过选择最终将选项加入到已选区,可以用在许多后台管理系统中.本文列表框的操作依赖jquery插件. HTML <form id="sel_form" action="post.php" method="post"> <p><input type="text" name="keys" id="
基于jquery的可多选的下拉列表框

同事在网上的找的下拉列表框出现位置不对的和加载慢的BUG,反正多选下拉列表框实现也很简单,与其看那些结构混乱的代码,不如自己重新实现一个. 先看效果: http://demo.jb51.net/js/2012/jquery_demo/jquery_select.html JS: 复制代码代码如下: (function ($) { $.fn.extend({ MultDropList: function (options) { var op = $.extend({ wraperClass: "
jquery实现列表上下移动功能

废话少说,我们开始进入主题. 今天我们实现的是一个列表页面上移.下移功能.如图: 当勾选列表中的列时,点击上移或者下移,会动态上移或者下移. html代码如下: <div> <input type="button" onclick="up();" value=" 上移 "> <input type="button" onclick="down();" value="
jQuery实现左右两个列表框的内容相互移动功能示例

本文实例讲述了jQuery实现左右两个列表框的内容相互移动功能.分享给大家供大家参考,具体如下: 在jQuery中将左右两个列表框的内容相互移动,移动的同时进行删除,这里只是给大家写一个入门的小案例,今后写相同的功能思路也是一样的.仅供新手们的一个参考.希望能给那些跟我一样在菜鸟路上不断奋斗的人一些灵感,尽早入门. <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title
JavaScript控制两个列表框listbox左右交换数据的方法

本文实例讲述了JavaScript控制两个列表框listbox左右交换数据的方法.分享给大家供大家参考.具体分析如下: 这个功能我们经常用到,将左边列表框的元素移动到右边,或者将右边列表框的元素移动到左边,可以一次性全部移动复制代码代码如下: function listbox_moveacross(sourceID, destID) { var src = document.getElementById(sourceID); var dest = document.getEl
jQuery简单实现点击文本框复制内容到剪贴板上的方法

本文实例讲述了jQuery简单实现点击文本框复制内容到剪贴板上的方法.分享给大家供大家参考,具体如下: //点击文本框复制其内容到剪贴板上方法 function copyToClipboard(txt) { if (window.clipboardData) { window.clipboardData.clearData(); window.clipboardData.setData("Text", txt); alert("已经成功复制到剪帖板上!"); } e
jQuery实现监听下拉框选中内容发生改变操作示例

本文实例讲述了jQuery实现监听下拉框选中内容发生改变操作.分享给大家供大家参考,具体如下: jQuery代码部分: <script> $(document).ready(function(){ var defaultId = "${defaultSelected}"; var defaultTime = "${timeName}"; $("select option").each(function(){ if($(this).va
易语言超级列表框表项关键字搜索代码示例

超级列表框表项关键字搜索示例 .版本 2 .支持库 iext .程序集启动窗口程序集 .程序集变量表项索引, 整数型 .子程序 _查找表项按钮_被单击 .局部变量临时文本, 文本型 .局部变量索引, 整数型 .局部变量是否找到, 逻辑型 .局部变量 a, 整数型 .如果真 (输入框 ("请输入需要查找的内容", "查找表项", "易语言7", 临时文本, ) ＝真) 是否找到＝假 .计次循环首 (超级列表框.取表项数 (), a)
jQuery实现可兼容IE6的淡入淡出效果告警提示功能示例

本文实例讲述了jQuery实现可兼容IE6的淡入淡出效果告警提示功能.分享给大家供大家参考,具体如下: 其实我觉得告警提示的话,直接用一个Alert就最好的.开门见山,直接让用户明白你当前系统的意思,关键是Alert这东西就是再破的浏览器都必须兼容,不然你它丫的做毛浏览器啊?但是,在现在越来越觉得Alert不美观,而且开始有"弹窗挺吓人"的思潮,因此,告警提示你必须做得好看一点.在Javascript的透明度的操控比较艰难的前提下,jQuery的简单淡入淡出效果是你的选择.之所以选择j
Python编程实现两个文件夹里文件的对比功能示例【包含内容的对比】

本文实例讲述了Python编程实现两个文件夹里文件的对比功能.分享给大家供大家参考,具体如下: #-*-coding:utf-8-*- #=============================================================================== # 目录对比工具(包含子目录 ),并列出 # 1.A比B多了哪些文件 # 2.B比A多了哪些文件 # 3.二者相同的文件:文件大小相同 VS 文件大小不同 (Size相同文件不打印:与Size不同文件显
Python3实现的字典、列表和json对象互转功能示例

本文实例讲述了Python3实现的字典.列表和json对象互转功能.分享给大家供大家参考,具体如下: python3可以使用json模块操作json json.dumps(): 对json进行编码,对应php的json_encode() json.loads(): 对json进行解码,对应php的json_decode() test.py #!/usr/bin/python3 import json #python字典类型转换为json对象 data = { 'id' : 1, 'name' :
Python基于列表list实现的CRUD操作功能示例

本文实例讲述了Python基于列表list实现的CRUD操作功能.分享给大家供大家参考,具体如下: 本篇文章看之前你的先了解python 基础的知识点,比如控制流,变量,数据类型,list,元组,字典基本操作,该文章主要的目的还是巩固python的基础,所以如果没有了解的python的同学建议先了解基础,再阅读该文,当然有编写不好的地方多多送鲜花和掌声.废话不多说先了解需求需求如下: 1. 界面列表欢迎来到用户管理系统 1 添加用户 2 删除用户 3 修改用户 4 查询用户 5 退出 2.
jQuery+css实现的点击图片放大缩小预览功能示例【图片预览查看大图】

本文实例讲述了jQuery+css实现的点击图片放大缩小预览功能.分享给大家供大家参考,具体如下: 要求点击一张图片,图片就会放大,查看大图,点击空白处就会隐藏大图,回到缩略图. 技术要点主要是Jquery进行元素的显示与隐藏. 代码 <!DOCTYPE html> <html> <head> <title>qqq</title> <meta charset="utf-8"> <style type=&q

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

相关推荐

随机推荐