说不清楚，直接上图

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">

<head>

    <meta charset="utf-8" />

    <title></title>

    <style type="text/css">

        * {

            margin: 0;

            padding: 0;

        }

        div.centent {

            float: left;

            text-align: center;

            margin: 10px;

        }

        span {

            display: block;

            margin: 2px 2px;

            padding: 4px 10px;

            background: #898989;

            cursor: pointer;

            font-size: 12px;

            color: white;

        }

    </style>

    <script src="jquery-1.3.2.min.js"></script>

    <script>

        $(function () {

            $("#add").click(function () {//单个添加

                var $options = $("#select1 option:selected");

                $options.appendTo("#select2");

            });

            $("#add_all").click(function () {//全部添加

                $("#select1 option").each(function () {

                    $(this).appendTo("#select2");

                    /*

                    也可以写为：

                    var p=$("#select1 option");

                    p.appendTo("#select2");

                    */

                });

            });

            $("#remove").click(function () {//同上，只不过方向相反

                var $options = $("#select2 option:selected");

               // var $remove = $options.remove();

                $options.appendTo("#select1");

            });

            $("#remove_all").click(function () {//同上，只不过方向相反

                var p = $("#select2 option");

                p.appendTo("#select1");

            });

        });

    </script>

</head>

<body>

    <div class="centent">

        <select multiple id="select1" style="width:100px;height:160px">

            <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>

            <option value="6">选项6</option>

        </select>

        <div>

            <span id="add">选中添加到右边&gt;&gt;</span>

            <span id="add_all">全部添加到右边&gt;;&gt;</span>

        </div>

    </div>

    <div class="centent">

        <select multiple id="select2" style="width:100px;height:160px"></select>

        <div>

            <span id="remove">&lt;&lt;选中删除到左边</span>

            <span id="remove_all">&lt;&lt;全部删除到左边</span>

        </div>

    </div>

</body>

</html>

jquery实现下拉框功能的更多相关文章

  1. JQuery实现的 checkbox 全选；<select>下拉框功能

    1. 全选的checkbox选中时,子checkbox全部选中.反之,全部不选 2.子checkbox中,只要有没有被选中的,取消全选checkbox的选中 3.子checkbox的数量和子check ...

  2. jquery 获取下拉框 某个text='xxx'的option的属性 非选中 如何获得select被选中option的value和text和......

    jquery 获取下拉框 某个text='xxx'的option的属性 非选中 5 jquery 获取下拉框 text='1'的 option 的value 属性值 我写的var t= $(" ...

  3. jquery对下拉框的操作

     jQuery对下拉框的操作 /获取第一个option的值 $('#test option:first').val(); //最后一个option的值 $('#test option:last').v ...

  4. struts-hibernate-ajax完成区县和街道级联下拉框功能(二补充使用json解析list结果集，ajax循环json层级处理)

    针对<struts-hibernate-ajax完成区县和街道级联下拉框功能>进行补充,上一篇中,要在action中拼接JSON格式字符串,很容易手抖.直接用json处理一下转成json格 ...

  5. jquery div 下拉框焦点事件

    这章与上一张<jquery input 下拉框(模拟select控件)焦点事件>类似 这章讲述div的焦点事件如何使用 div的焦点事件与input的焦点事件区别在于 需要多添加一个属性: ...

  6. Jquery操作下拉框(DropDownList)实现取值赋值

    Jquery操作下拉框(DropDownList)想必大家都有所接触吧,下面与大家分享下对DropDownList进行取值赋值的实现代码 1. 获取选中项: 获取选中项的Value值: $('sele ...

  7. jquery 获取下拉框值与select text

    下面先介绍了很多jquery获取select属性的方法,同时后面的实例我们讲的是jquery 获取下拉框值与select text代码. 下面先介绍了很多jquery获取select属性的方法,同时后 ...

  8. jQuery对下拉框Select操作总结

    jQuery对下拉框Select操作总结 转自网络,留做备用 jQuery获取Select元素,并选择的Text和Value: 1. $("#select_id").change( ...

  9. js,jquery获取下拉框选中的option

    js获取select选中的值: var sel=document.getElementById("select1"); var index = sel.selectedIndex; ...

随机推荐

  1. iOS客户端的在线安装和更新——针对ADHoc证书

    这篇文章纯给自己留个备份,所以对AdHoc证书内部分发和对iOS客户端开发不了解的请直接无视. 一般在iOS游戏或应用开发过程中,正式发布到App Store之前,都需要内部的测试,客户端的安装是个不 ...

  2. ubuntu16.04+opencv3.1配置

    #安装必要的依赖sudo apt-get install build-essential cmakesudo apt-get install cmake Git libgtk2.0-dev pkg-c ...

  3. LeetCode: Unique Paths II 解题报告

    Unique Paths II Total Accepted: 31019 Total Submissions: 110866My Submissions Question Solution  Fol ...

  4. 支持取消操作和暂停操作的Backgroundworker

    这也是今天讨论的话题.取消是默认就支持的,而暂停则默认不支持.但通过ManualResetEvent可以对其进行干预. using System; using System.Collections.G ...

  5. ServiceManager 小结

    1 ServiceManger 根据name优先从Map中获取IBinder,例如AMS.WMS.PMS:如果Map中没有对应的IBinder,我们获取Serviceanager的代理ServiceM ...

  6. U-boot.lds文件分析

    OUTPUT_FORMAT("elf32-littlearm", "elf32-littlearm", "elf32-littlearm") ...

  7. Hadoop 2.4.1 Map/Reduce小结【原创】

    看了下MapReduce的例子.再看了下Mapper和Reducer源码,理清了参数的意义,就o了. public class Mapper<KEYIN, VALUEIN, KEYOUT, VA ...

  8. Spark和hadoop的关系

    1. Spark VSHadoop有哪些异同点? Hadoop:分布式批处理计算,强调批处理,常用于数据挖掘和数据分析. Spark:是一个基于内存计算的开源的集群计算系统,目的是让数据分析更加快速, ...

  9. WPF中如何用代码触发按钮Click处理

    btnOk.RaiseEvent(new RoutedEventArgs(Button.ClickEvent));

  10. 【C语言】zz优先队列的实现

    做一个题目时,看见解法中使用了优先队列,http://hawstein.com/posts/3.6.html . 颇为好奇,找资料学习了一下,顺便做个摘要. c++的用法: 转自:http://blo ...