说不清楚，直接上图

<!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. jquery获取元素的值，获取当前对象的父对象等等

    jsp代码: <span><input type="hidden" value="1" id="newInfo">& ...

  2. 无法import的原因(ImportError: No module named *****)

    python中,每个py文件被称之为模块,每个具有__init__.py文件的目录被称为包.只要模块或者包所在的目录在sys.path中,就可以使用import 模块或import 包来使用. 如果想 ...

  3. Difference between SET, SETQ and SETF in LISP

    SET can set the value of symbols;   SETQ can set the value of variables;   SETF is a macro that will ...

  4. Embeding Python & Extending Python with FFPython

    Introduction ffpython is a C++ lib, which is to simplify tasks that embed Python and extend Python. ...

  5. 微软MVC对架构的一点思考

    毕业即将三年,在学校学习.做毕设一直使用拖控件的 Winform\WebForm,工作后公司采用MVC3架构做项目. 下面使用mvc的个人总结 : 1.架构上分层清晰.便于研发,耦合性好 2.缓存机制 ...

  6. StringEx

    static class StringEx { public static string MD5(this String str) { byte[] bytes = new MD5CryptoServ ...

  7. js/jquery 实时监听输入框值变化的完美方案：oninput & onpropertychange

    (1)     先说jquery, 使用 jQuery 库的话,只需要同时绑定 oninput 和 onpropertychange 两个事件就可以了,示例代码: $('#username').bin ...

  8. JMir——Java版热血传奇2之资源文件与地图

    我虽然是90后,但是也很喜欢热血传奇2(以下简称“传奇”)这款游戏. 进入程序员行业后自己也对传奇客户端实现有所研究,现在将我的一些研究结果展示出来,如果大家有兴趣的话不妨与我交流. 项目我托管到co ...

  9. makeJar

    task makeJar(type: Jar) { //指定生成的jar名 baseName 'plugin' //从哪里打包class文件 from('build/intermediates/cla ...

  10. java之对象转型

    对象转型(casting) 1.一个基类的引用类型变量可以“指向”其子类的对象. 2.一个基类的引用不可以访问其子类对象新增加的成员(属性和方法). 3.可以使用 引用变量 instanceof 类名 ...