知识点：

jquery  的 click dbclick  事件  appendTo方法

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title>下拉列表左右选择</title>

        <script type="text/javascript" src="../js/jquery-1.8.3.js" ></script>

        <script>

            $(function(){

                //1.选中单击去右边

                $("#selectOneToRight").click(function(){

                    $("#left option:selected").appendTo($("#right"));

                });

                //2.单击全部去右边

                $("#selectAllToRight").click(function(){

                    $("#left option").appendTo("#right");

                });

                //3.选中双击去右边

                $("#left option").dblclick(function(){

                    $("#left option:selected").appendTo($("#right"));

                })

            });

        </script>

    </head>

    <body>

        <table border="1" width="600" align="center">

            <tr>

                <td>

                    分类名称

                </td>

                <td>

                    <input type="text" name="cname" value="手机数码"/>

                </td>

            </tr>

            <tr>

                <td>

                    分类描述

                </td>

                <td>

                    <textarea name="cdesc" rows="4" cols="20">手机数码类商品</textarea>

                </td>

            </tr>

            <tr>

                <td>

                    分类商品

                </td>

                <td>

                    <span style="float: left;">

                        <font color="green" face="宋体">已有商品</font><br/>

                        <select multiple="multiple" style="width: 100px;height: 200px;" id="left">

                            <option>IPhone6s</option>

                            <option>小米4</option>

                            <option>锤子T2</option>

                        </select>

                        <p><a href="#" style="padding-left: 20px;" id="selectOneToRight">&gt;&gt;</a></p>

                        <p><a href="#" style="padding-left: 20px;" id="selectAllToRight">&gt;&gt;&gt;</a></p>

                    </span>

                    <span style="float: right;">

                        <font color="red" face="宋体">未有商品</font><br/>

                        <select multiple="multiple" style="width: 100px;height: 200px;" id="right">

                            <option>三星Note3</option>

                            <option>华为6s</option>

                        </select>

                        <p><a href="#" >&lt;&lt;</a></p>

                        <p><a href="#" >&lt;&lt;&lt;</a></p>

                    </span>

                </td>

            </tr>

            <tr>

                <td colspan="2">

                    <input type='submit' value="修改"/>

                </td>

            </tr>

        </table>

    </body>

</html>

Jquery实现下拉列表左右选择的更多相关文章

  1. jQuery根据下拉列表的选择进行不同的操作

    需求:选择了某个下拉列表选项,进行不同的操作 代码部分: <!doctype html> <html> <head> <meta charset=" ...

  2. jQuery学习(七)——使用JQ完成下拉列表左右选择

    1.需求:实现以下功能 2.步骤分析: 第一步:确定事件(鼠标单击事件click) 第二步:获取左侧下拉列表被选中的option($(“#left option:selected”)) [假设左侧se ...

  3. jquery获取下拉列表的值和显示内容的方法

    页面的下拉列表: 选择时间段: <select name="timespan" id="timespan" class="Wdate" ...

  4. js实现-下拉列表左右选择

    下拉列表左右选择          * 下拉选择框               <select>                     <option>111</opt ...

  5. jQuery选择器的优化选择

    jQuery选择器的优化选择 1.1 属性选择器 var $div=$("[id]"); 选中拥有该属性的元素 var $div=$("[id=div]");  ...

  6. JavaScript案例五：下拉列表左右选择

    用JavaScript实现下拉列表左右选择,很简单,不过要特别注意循环时要注意变量是否发生了变化(见代码) <!DOCTYPE html> <html> <head> ...

  7. JQuery基础教程：选择元素（中）

    自定义选择符 JQuery在各种CSS选择符的基础上还添加了独有的完全不同的自定义选择符,注意,只要可能,jQuery就会使用浏览器原生的DOM选择符引擎去查找元素.但在使用自定义选择符的时候,就无法 ...

  8. jQuery 在Table中选择input之类的东西注意事项

    jQuery 在Table中选择input之类的东西注意事项: 如果不在td标签中,是不能进行正确选择的: <table id="tblFormId"> <tr& ...

  9. ul+jquery自定义下拉选择框

    <!doctype html> <html> <head> <meta charset="UTF-8"> <title> ...

随机推荐

  1. 7，MongoDB 之 Limit 选取 Skip 跳过 Sort 排序

    我们已经学过MongoDB的 find() 查询功能了,在关系型数据库中的选取(limit),排序(sort) MongoDB中同样有,而且使用起来更是简单 首先我们看下添加几条Document进来 ...

  2. Druid数据库连接池及内置监控的配置和使用

    Druid介绍 Druid首先是一个数据库连接池,并且是目前最好的数据库连接池,在功能.性能.扩展性方面,都超过其他数据库连接池,包括DBCP.C3P0.BoneCP.Proxool.JBoss Da ...

  3. flask利用session身份伪造

    想研究很久了,这次终于初步了解了flask session伪造(得知道密钥). python2和python3 session解密不一样,而且不都是base64,脚本https://github.co ...

  4. Python lambda介绍

    在学习python的过程中,lambda的语法时常会使人感到困惑,lambda是什么,为什么要使用lambda,是不是必须使用lambda? 下面就上面的问题进行一下解答. 1.lambda是什么? ...

  5. CentOS 6.3 下 vsftp搭建

    环境:CentOS6.3 ftp的三种用户模式 匿名用户:vsftp默认开启匿名用户,但只允许下载不允许上传:匿名用户anonymous或ftp:匿名用户目录/var/ftp,但实际上vsftp对匿名 ...

  6. Python数据分析-Matplotlib图标绘制

    Matplotlib介绍 Matplotlib是一个强大的Python绘图和数据可视化的工具包. Matplotlib的主要功能 Matplotlib是python中的一个包,主要用于绘制2D图形(当 ...

  7. mssql发布订阅事项

    在发布订阅过程中遇到2个需求: 1.在原有的发布快照中增加发布内容,追加模式需要在追加的表中设计一个主键,要不然没有办法进行发布的,另外还得注意将这两个字段进行更改: select immediate ...

  8. 【Python】- 最牛逼的内建函数max和min

    本文主要介绍了max的运行机制,以及如何传入和比较,min函数的运行机制和max一样,只是min取的是最小值 max/min 后直接跟序列会返回此序列的最大/最小值 max(iterable, key ...

  9. POJ 2115 C-Looooops | exgcd

    题目 给出一个循环for(int i=A;i!=B;i+=C) 在mod (1<<k) 下是否可以退出循环 是,输出时间,否输出FORVEER 题解: 题意可以变换成 A+Cx=B (mo ...

  10. POJ 2142 The balance | EXGCD

    题目: 求ax+by=c的一组解,使得abs(x)+abs(y)尽量小,满足前面前提下abs(ax)+abs(by)尽量小 题解: exgcd之后,分别求出让x尽量小和y尽量小的解,取min即可 #i ...