1、需求：实现以下功能

2、步骤分析：

第一步：确定事件(鼠标单击事件click)

第二步：获取左侧下拉列表被选中的option($(“#left option:selected”)) [假设左侧select定义了一个id=left]

第三步：将获取到的option添加到右侧的下拉列表中去。(append方法的使用)

3、具体代码实现：

 <!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>IPhone7</option>

                             <option>小米5X</option>

                             <option>荣耀V9</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>OPPO R11</option>

                             <option>华为Nova2 Plus</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学习(七)——使用JQ完成下拉列表左右选择的更多相关文章

  1. jQuery学习(六)——使用JQ完成省市二级联动

    1.JQ的遍历操作 方式一: 1 $(function(){ //全选/全不选 $("#checkallbox").click(function(){ var isChecked= ...

  2. jquery学习笔记2——jq效果

    一.显示隐藏: 可以使用show()和hide()方法来显示隐藏: $("#hide").click(function(){ $("p").hide(); }) ...

  3. jQuery学习(五)——使用JQ完成复选框的全选和全不选

    1.在系统后台进行人员管理时,进行批量删除,使用jq完成全选和全不选 步骤分析: 第一步:引入jquery文件 第二步:书写页面加载函数 第三步:为上面的复选框绑定单击事件 第四步:将下面所有的复选框 ...

  4. jQuery学习(二)——使用JQ完成页面定时弹出广告

    1.JQuery效果 2.步骤分析: 第一步:引入jQuery相关的文件 第二步:书写页面加载函数 第三步:在页面加载函数中,获取显示广告图片的元素. 第四步:设置定时操作(显示广告图片的函数) 第五 ...

  5. jquery学习笔记3——jq HTML

    jQuery最常用的部分就是操作DOM,jQuery提供了一系列操作DOM的相关方法,使其很容易: 一.获取 1.获取内容 text()方法    设置或返回所选元素的文本内容: html()方法   ...

  6. jquery 学习(七) - 常用动态效果

    <!--转载于 听说你的代码很6--><!--http://www.jq22.com/webqd2377--> CSS <style> #content #firs ...

  7. jQuery学习(八)——使用JQ插件validation进行表单校验

    1.官网下载:http://bassistance.de/jquery-plugins/jquery-plugin-validation/ 目录结构: 2.引入jquery库和validation插件 ...

  8. jQuery学习(四)——使用JQ完成表格隔行换色

    1.步骤分析: 第一步:引入jquery的类库 第二步:直接写页面加载函数 第三步:直接使用jquery的选择器(组合选择)拿到需要操作的元素(奇数行和偶数行) 第四步:分别使用CSS的方法(css( ...

  9. jquery学习笔记3 jq遍历

    遍历方式:向上(父级元素)  向下(子元素)    水平(同胞元素) 一.向上遍历 parent()      向上一级   放回被选元素的直接父元素 parents()          返回被选元 ...

随机推荐

  1. （转）Django学习之 第一章：Django介绍

    Django: Python编程Web框架 如果你上djangoproject.com你会发现对Django的如下解释: “Django is a high-level Python Web fram ...

  2. struts.xml里面子元素的配置

    <struts> <!-- package:包,struts2使用package来组织模块 name属性:必须,用于其他的包引用当前包 extends:当前包继承哪个包,继承的,即可 ...

  3. css font-family 字体组

    介绍图片来自: http://www.runoob.com/cssref/css-websafe-fonts.html

  4. linux下如何查看cpu信息

    linux的cpu信息可以从文件中cpuinfo读取. 执行命令: # cat  /proc/cpuinfo   我们一般看到的processor是逻辑核. 它的计数是从0开始的,例如这里看到的是31 ...

  5. Linux磁盘分区--MBR分区

    今天心情不高兴,做IT不容易被公司重视,一定要速度学会运营,成为一个高逼格的技术男. 今天我要熟练掌握linux系统分区的能力.大家都知道,linux系统分区有两种分区格式:GTP和MBR. MBR作 ...

  6. Android开发新手HelloWorld解析

    首先看这个 HelloWorld 类. Java代码public class HelloWorld extends Activity {       /** Called when the activ ...

  7. NOIP2018提高组省一冲奖班模测训练（三）

    NOIP2018提高组省一冲奖班模测训练(三) 自己按照noip的方式考,只在最后一两分钟交了一次 第一题过了,对拍拍到尾. 第二题不会.考试时往组合计数的方向想,推公式,推了一个多小时,大脑爆炸,还 ...

  8. Unity的Json解析<一>--读取Json文件

    本文章由cartzhang编写,转载请注明出处. 所有权利保留. 文章链接:http://blog.csdn.net/cartzhang/article/details/50373558 作者:car ...

  9. Virtual Box 新建一个虚拟机安装系统（补充：WIN7 64 bit 系统虚拟机无法安装 64 bit 系统问题）

    1.安装Virtual Box好后,点击新建 2.配置内存大小,这个根据自己需要配置就好 3.创建虚拟硬盘 这里选择固定分配.动态分配都可以,接下来就分配硬盘大小了 4.新建好后我们点击刚才建立的虚拟 ...

  10. jquery获得url的get参数

    只是用了第一种方法,简单好用直接传入想要获取的参数名,即可返回参数值 function GetQueryString(name) {      var reg = new RegExp("( ...