关键字: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. android插件化之路

    概论  插件式开发通俗的讲就是把一个很大的app分成n多个比较小的app,其中有一个app是主app.基本上可以理解为让一个apk不安装也可以被运行.只不过这个运行是有很多限制的运行,所以才叫插件. ...

  2. XStream

     1.引入需要的jar包,在pom.xml中配置依赖 <dependency> <groupId>com.thoughtworks.xstream</groupId& ...

  3. Http协议处理器——Http11Processor

    Http11Processor组件提供了对Http协议通信的处理,包括对套接字的读取过滤.对http协议的解析并封装成请求对象.http响应对象的生成.套接字的过滤写入等等操作. 喜欢研究java的同 ...

  4. uploadify 3.2 java应用丢失session

    flash中有个bug就是自身创建一个session,这样就导致与web本身的session不一致 权限验证失败的问题.  原因: 因为uploadify是不会自动传送session值的,所以当ses ...

  5. Android学习之AppWidget高级效果

    接着AppWidget基础学习,今天是一个"进阶版"的小例子,用来检验一下自己的学习效果.于是就做了一个掷骰子的Widget. 方便大家观看,先截图如下: 需要注意的是在drawa ...

  6. 软考之路--J2SE,从HelloWorld到传世代码

    "Hello World"程序指的是只在计算机屏幕上输出"Hello, World!"(意为"世界,你好!")这行字符串的计算机程序.hel ...

  7. 【Unity Shaders】Using Textures for Effects——通过修改UV坐标来滚动textures

    本系列主要参考<Unity Shaders and Effects Cookbook>一书(感谢原书作者),同时会加上一点个人理解或拓展. 这里是本书所有的插图.这里是本书所需的代码和资源 ...

  8. AngularJS进阶(三十一)AngularJS项目开发技巧之获取模态对话框中的组件ID

    AngularJS项目开发技巧之获取模态对话框中的组件ID 需求 出于项目开发需求,需要实现的业务逻辑是:药店端点击查看"已发货""已收货"订单详情时,模块弹出 ...

  9. 《java入门第一季》之面向对象(修饰符的概念和总结)

    还是由于eclipde等ide的强大功能,会自动提示你修饰符是否可行.所以对修饰符的作用了解即可: 修饰符:         权限修饰符:private,默认的,protected,public    ...

  10. 怎样写一个与Win8 IE11兼容的标准BHO?

    怎样写一个与Win8 IE11兼容的标准BHO? 环境:Windows8.1 x86 IE11(其它环境未讨论) 作者:magictong 日期:2014/02/02 概述 微软在2013年6月份推出 ...