知识点：

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. getElementByName????????,????????,

    getElementByName可以获取多个元素,获得的是一个数组, getElementById只能获取一个,是dom从上往下的第一个元素.

  2. Robolectric

    今天学习了单元测试框架,Robolectric.初步感觉,可能我测试的少,没有感觉Robolectric能有多大的帮助.虽然可以帮助创建activity.可以模拟点击事件.可是有什么呢. 好吧,讲下使 ...

  3. Tensorflor实现文本分类

    Tensorflor实现文本分类 下面我们使用CNN做文本分类 cnn实现文本分类的原理 下图展示了如何使用cnn进行句子分类.输入是一个句子,为了使其可以进行卷积,首先需要将其转化为向量表示,通常使 ...

  4. 剑指Offer - 九度1503 - 二叉搜索树与双向链表

    剑指Offer - 九度1503 - 二叉搜索树与双向链表2014-02-05 23:39 题目描述: 输入一棵二叉搜索树,将该二叉搜索树转换成一个排序的双向链表.要求不能创建任何新的结点,只能调整树 ...

  5. SQL语句中的换行符

    直接看示例(顺便注意下连接符) 示例1:Access INSERT INTO ZD_DJDCB (DJH,ZDSZ) VALUES ('150105101204JC00428', '北: 地块1' + ...

  6. python3知识点之---------列表的介绍

    1.列表是什么? 它是由一系列特定顺序排序的元素组成.元素可以表示一切任何的事物,元素之间可以没有任何关系.列表用方括号[ ] 表示,元素之间由逗号隔开.   例如表示一系列数字的列表:  numbe ...

  7. Python网络编程（子进程的创建与处理、简单群聊工具）

    前言: 昨天我们已经了解了多进程的原理以及它的实际使用 Unix/Linux操作系统提供了一个fork()系统调用,它非常特殊.普通的函数调用,调用一次,返回一次, 但是fork()调用一次,返回两次 ...

  8. mysql语法结构

    环境:win7 64位.mysql 适合阅读者:对sql基本语法有一定了解 <建表语句>: create table <表名>( <列名> <类型> & ...

  9. Python读取不同文件夹下的图片并且分类放到新创建的训练文件夹和标签文件夹

    在深度学习的训练时,经常会碰到训练的样本数据集和标签数据集是在一个文件夹中,这个时候我们就不得不进行一些数据的预处理和文件的分类,例如将训练(training data)数据集和标签数据集(label ...

  10. Linux下vsftp匿名用户配置

    Linux下vsftp匿名用户上传和下载的配置 配置要注意三部分,请一一仔细对照: 1.vsftpd.conf文件的配置(vi /etc/vsftpd/vsftpd.conf) #允许匿名用户登录FT ...