关键字:jQuery监听事件经典例子 





js代码: 

============================================================ 



$(function(){ 

   $("#s1 option:first,#s2 option:first").attr("selected",true); 

  

   $("#s1").dblclick(function(){ 

     var alloptions = $("#s1 option"); 

     var so = $("#s1 option:selected"); 



     so.get(so.length-1).index == alloptions.length-1?so.prev().attr("selected",true):so.next().attr("selected",true);

    

     $("#s2").append(so); 

   }); 

  

   $("#s2").dblclick(function(){ 

     var alloptions = $("#s2 option"); 

     var so = $("#s2 option:selected"); 

    

     so.get(so.length-1).index == alloptions.length-1?so.prev().attr("selected",true):so.next().attr("selected",true);

    

     $("#s1").append(so); 

   }); 

  

   $("#add").click(function(){ 

     var alloptions = $("#s1 option"); 

     var so = $("#s1 option:selected"); 



     so.get(so.length-1).index == alloptions.length-1?so.prev().attr("selected",true):so.next().attr("selected",true);

    

     $("#s2").append(so); 

   }); 

  

   $("#remove").click(function(){ 

     var alloptions = $("#s2 option"); 

     var so = $("#s2 option:selected"); 

    

     so.get(so.length-1).index == alloptions.length-1?so.prev().attr("selected",true):so.next().attr("selected",true);

    

     $("#s1").append(so); 

   }); 

  

   $("#addall").click(function(){ 

     $("#s2").append($("#s1 option").attr("selected",true)); 

   }); 

  

   $("#removeall").click(function(){ 

     $("#s1").append($("#s2 option").attr("selected",true)); 

   }); 

  

   $("#s1up").click(function(){ 

     var so = $("#s1 option:selected"); 

     if(so.get(0).index!=0){ 

       so.each(function(){ 

           $(this).prev().before($(this)); 

       }); 

     } 

   }); 

  

   $("#s1down").click(function(){ 

     var alloptions = $("#s1 option"); 

     var so = $("#s1 option:selected"); 

    

     if(so.get(so.length-1).index!=alloptions.length-1){ 

       for(i=so.length-1;i>=0;i--) 

       { 

         var item = $(so.get(i)); 

         item.insertAfter(item.next()); 

       } 

     } 

   }); 

  

   $("#s2up").click(function(){ 

     var so = $("#s2 option:selected"); 

     if(so.get(0).index!=0){ 

       so.each(function(){ 

           $(this).prev().before($(this)); 

       }); 

     } 

   }); 

  

   $("#s2down").click(function(){ 

     var alloptions = $("#s2 option"); 

     var so = $("#s2 option:selected"); 

    

     if(so.get(so.length-1).index!=alloptions.length-1){ 

       for(i=so.length-1;i>=0;i--) 

       { 

         var item = $(so.get(i)); 

         item.insertAfter(item.next()); 

       } 

     } 

   }); 

}); 

jQuery监听事件经典例子的更多相关文章

  1. jquery实现拖拽以及jquery监听事件的写法

    很久之前写了一个jquery3D楼盘在线选择,这么一个插件,插件很简单,因为后期项目中没有实际用到,因此,有些地方不是很完善,后面也懒得再进行修改维护了.最近放到github上面,但是也少有人问津及s ...

  2. jquery监听事件on写法以及简单的拖拽效果

    引子——关于jquery的某些写法 我先不对监听事件做解释,我们先来看下jquery的一些写法吧!我们最常用的是jquery的css()方法,相信大家都会用! 假如用css设置一个属性,我们写法如下: ...

  3. jQuery页面滚动监听事件及高级效果插件

    jQuery页面滚动监听事件及高级效果插件 1. One Page scroll (只适用于上下焦点图)http://www.thepetedesign.com/demos/onepage_scrol ...

  4. Android 属性动画监听事件与一个菜单的例子

    简单监听事件 ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 3 ...

  5. jquery的监听事件和触发事件

    监听事件 $(selector).on('Event me',function(e){ //do something }) 触发事件 $(selector).trigger('Event name') ...

  6. jquery中,使用append增加元素时,该元素的绑定监听事件失效

    举例:如果在一个<div id="resultArea"></div>中,通过append添加一个id="checkOutTip"的文本 ...

  7. jquery中,使用append增加新元素时,新增元素的绑定监听事件失效的解决办法

    $("outerSelector").on("eventType","innerSelector",function(){}); 举例:如果 ...

  8. 一步一步学android之事件篇——单选按钮监听事件

    在平常使用软件的时候,我们经常会碰见一些选择题,例如选择性别的时候,在男和女之间选,前面说过这个情况要用RadioGroup组件,那么点击了之后我们该怎么获取到选择的那个值呢,这就是今天要说的OnCh ...

  9. js监听事件 上滑消失下滑出现的效果 触摸与手势事件

    https://www.w3cmm.com/javascript/touch.html //触摸与手势事件连接tinyscrollbar //方法1var _this = $('#fabu');var ...

随机推荐

  1. 带吸附效果的ViewPager(二)

    上篇实现了一个简单的吸附效果,那么这篇我们来实现上篇中所示的360软件详情页(带viewpager)的效果!先来参观下本篇所实现的效果图: 了解了上一篇的实现过程,那么本篇的效果无非是修改一下布局,将 ...

  2. 【java虚拟机系列】java虚拟机系列之JVM总述

    我们知道java之所以能够快速崛起一个重要的原因就是其跨平台性,而跨平台就是通过java虚拟机来完成的,java虚拟机属于java底层的知识范畴,即使你不了解也不会影响绝大部分人从事的java应用层的 ...

  3. J2EE进阶(三)struts2 <s:action>标签的用法

    J2EE进阶(三)struts2 <s:action>标签的用法 前言 使用action标签,可以允许在jsp页面中直接调用Action,(类似AJAX页面调用)在调用Action时候,可 ...

  4. 2015-2016机器人操作系统(ROS)及其应用暑期学校资料汇总 ROS Summer School 持续更新

    综合信息:2015    2016 课程资料:2015     2016 其他重要机器人.ROS相关学习活动 知乎关于ROS的话题 1 ROS的开发流程?http://www.zhihu.com/qu ...

  5. Dynamics CRM2013 更新用户数据主要电子邮件字段报数据加密错误

    今天在更新用户数据中的主要邮件字段时报数据 可以进系统设置-数据管理-数据加密中开启,但前提是必须启用https访问而不能用http,在第二个框内输入秘钥点击激活就行了,我这边已经激活过了所以显示的是 ...

  6. ROS_Kinetic_07 ROS中机器人三维物理引擎高保真仿真利器gazebo 7.0

    ROS_Kinetic_07 ROS中机器人三维物理引擎高保真仿真利器gazebo 7.0 ROS kinetic中的gazebo版本是7.0,有很多新的特性. 首先,启动gazebo: ~$ gaz ...

  7. 11.2、Libgdx的音频之音乐

    (官网:www.libgdx.cn) 对于任何超过5秒的声音来说,最好将其放到磁盘中而不是内存中.Libgdx提供了一个Music接口来帮我们实现. 以下载入Music实例: Music music ...

  8. 【shell脚本练习】网卡信息和简单日志分析

    题目 1.写一个脚本getinterface.sh,脚本可以接受参数(i,I,a),完成以下任务: (1)使用以下形式:getinterface.sh [-i interface|-I IP|-a] ...

  9. C++ Primer 有感(new和delete表达式)

    定义变量时,必须指定其数据类型和名字.而动态创建对象时,只需指定其数据类型,而不必为该对象命名.取而代之的是,new表达式返回指向性创建的指针. 1.动态创建对象的默认初始化 对于类类型的对象,用该类 ...

  10. (NO.00001)iOS游戏SpeedBoy Lite成形记(三)

    在Xcode中建立新类Player,继承自CCSprite.因为我们之后需要方便的更换玩家的大头贴,所以需要能够以不同的大头贴参数初始化Player对象. 不过别急,想想我们还需要在Player对象初 ...