知识点：

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. 如何让button保持点击状态

    http://blog.csdn.net/u010957508/article/details/38385207 他的原理就是在代码里面: view.setSelected(true); 而其他的: ...

  2. 《Cracking the Coding Interview》——第12章：测试——题目3

    2014-04-24 23:28 题目:玩象棋游戏,你要设计一个bool型的方法来检测一个棋子能否移动到指定位置. 解法:不同的棋子有不同的移动规则,那么应该采取棋子基类实现接口,各个棋子子类来实现的 ...

  3. serial console

    适用于: agent_ipmitool_socat pxe_ipmitool_socat 修改driver方式:更换ironic node的driver类型 yum install -y socat ...

  4. HDU 4661 Message Passing ( 树DP + 推公式 )

    参考了: http://www.cnblogs.com/zhsl/archive/2013/08/10/3250755.html http://blog.csdn.net/chaobaimingtia ...

  5. bash语法注意点

    bash 语法注意点 =和不能分开 如: val=expr $a + $b` [空格 *** 空格]条件判断要有空格 如: if [ $a ==$b ] 表达式和运算符之间要有空格, $a空格 + 空 ...

  6. jQuery对象转化为DOM对象

    jQuery库本质上还是JavaScript代码,它只是对JavaScript语言进行包装处理,为的是提供更好更方便快捷的DOM处理与开发中经常使用的功能.我们使用jQuery的同时也能混合JavaS ...

  7. weex 开发 (已放弃了)

    关于weex 开发 本菜已放弃使用了,当初选择使用weex 是为了同时支持h5 和 android / ios  三端:想法很不错,深入之后 突然发现,开发起来并没有很轻松,因为weex 中有些方法, ...

  8. 【bzoj4881】[Lydsy2017年5月月赛]线段游戏 树状数组+STL-set

    题目描述 quailty和tangjz正在玩一个关于线段的游戏.在平面上有n条线段,编号依次为1到n.其中第i条线段的两端点坐标分别为(0,i)和(1,p_i),其中p_1,p_2,...,p_n构成 ...

  9. 【Luogu】P2465山贼集团（树形状压DP）

    题目链接 写了个70分暴力还挂了,第一遍提交只拿了十分……海星 首先建虚拟节点多叉树转成二叉,然后子集枚举DP 设g[x][i]是以x为根的子树内山贼集合i,x啥都不选也没贡献的时候的最大价值 f[x ...

  10. IPV6地址格式分析

    IPV6地址格式分析 IPv6的地址长度是128位(bit). 将这128位的地址按每16位划分为一个段,将每个段转换成十六进制数字,并用冒号隔开. 例如:2000:0000:0000:0000:00 ...