知识点：

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. Python数据类型一

    一.整型 在Python内部对整数的处理分为普通整数和长整数,普通整数长度为机器位长,通常都是32位,超过这个范围的整数就自动当长整数处理,而长整数的范围几乎完全没限制Python可以处理任意大小的整 ...

  2. 实际遭遇GC回收造成的Web服务器CPU跑高

    今天下午有段时间访问园子感觉不如以前那么快的流畅,上Web服务器一看,果然,负载均衡中的1台云服务器CPU跑高. 上图中红色曲线表示的是CPU占用率.正常情况下,CPU占用率一般在40%以下. 这台云 ...

  3. USACO Section1.3 Wormholes 解题报告

    wormhole解题报告 —— icedream61 博客园(转载请注明出处)------------------------------------------------------------- ...

  4. 《算法》C++代码 Dijkstra

    单源最短路,复杂度是O(N²),堆优化的是O(NlogN).基本思想是贪心,每次都加入一个当前最近的点,可以证明每次当时最近的点就是当前最短的路径.因此,所有点都加入之后,起点到所有点的最短路径就都求 ...

  5. node.js和npm的安装

    1.进入node.js官方网站,下载和系统对应的版本,我下载的是这个最新版本:node-v8.2.1-x64.msi https://nodejs.org/en/download/ 2.windows ...

  6. obj = object()，所创建的obj实例到底是个啥？

    In[1]: dir(obj) Out[1]:['__class__', '__delattr__', '__dir__', '__doc__', '__eq__', '__format__', '_ ...

  7. python与execl的读写

    [code=python] #复制execl中的部分数据到另一份execl中的相同位置 import xlrd import xlwt import xlutils.copy path1=" ...

  8. 孤荷凌寒自学python第六十五天学习mongoDB的基本操作并进行简单封装4

    孤荷凌寒自学python第六十五天学习mongoDB的基本操作并进行简单封装4 (完整学习过程屏幕记录视频地址在文末) 今天是学习mongoDB数据库的第十一天. 今天继续学习mongoDB的简单操作 ...

  9. JAVA并发-线程协作

    这段时间有点忙,技术博客更新的比较少,今天更新一下相关并发的常用线程协作的类吧. ExecutorService 线程池,用于创造和复用线程,他有几种模式. 我举一个自定义线程池数量的例子如下 Exe ...

  10. 【Linux】- 获取root权限命令

    1:Redhat系统或者Fedora或者CentOs的Linux发行版,那么在Linux终端输入命令回车: su - root 这样就可以切换到root权限了 2:Ubuntu系统,在Linux终端输 ...