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. 转:Eclipse上安装GIT插件EGit及使用

    一.Eclipse上安装GIT插件EGit Eclipse的版本eclipse-java-helios-SR2-win32.zip(在Eclipse3.3版本找不到对应的 EGit插件,无法安装) E ...

  2. Chosen：Select 选择框的华丽变身

    HTML Form 表单里的各种组件,例如文本输入框,textarea,按钮等,都可以通过CSS或其它技术进行美化,让它们看起来很漂亮了,唯独下拉列表选项框(select box),不管你怎么做,它摆 ...

  3. 第六章 Python之迭代器与生成器

    迭代器 迭代:迭代是一个重复的过程,每次重复即一次迭代,并且每次迭代的结果是下一次重复的初始值 l=['a','b','c'] count=0 while count < len(l): pri ...

  4. 一些特殊ACII码的用法 在控制台中覆盖显示、刷新显示和删除字符

    很好奇怎么实现在控制台中不换行直接显示新的信息把旧的替换掉,于是找到了两个ACII码字符,他们可以帮助实现. 一个是‘\b’字符,这个字符是backspace,即删除上一个字符,于是可以清除以显示的旧 ...

  5. IOS - 网络指示器

    #pragma mark Activity methods - (void)openActivity { // 添加网络指示器 activityIV = [[UIActivityIndicatorVi ...

  6. NOIP2016 DAY1 T3 换教室

    换教室 Description 对于刚上大学的牛牛来说,他面临的第一个问题是如何根据实际情况申请合适的课程.在可以选择的课程中,有2n节 课程安排在n个时间段上.在第i(1≤i≤n)个时间段上,两节内 ...

  7. jquery 终止循环

    jQuery中each类似于javascript的for循环 但不同于for循环的是在each里面不能使用break结束循环,也不能使用continue来结束本次循环,想要实现类似的功能就只能用ret ...

  8. Python基本类型操作

    # str = "2017.1.1.wmv" # #print(str[str.rfind('.'):]) # #print(str.count(".")) # ...

  9. 2019-03-21 Python Request InsecureRequestWarning

    问题: 使用Python3 requests发送HTTPS请求,已经关闭认证(verify=False)情况下,控制台会输出以下错误: InsecureRequestWarning: Unverifi ...

  10. 【codeforces 229C】Triangles

    [题目链接]:http://codeforces.com/problemset/problem/229/C [题意] 给你一张完全图; 然后1个人从中选择m条边; 然后另外一个人从中选择剩余的n*(n ...