关键字: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. Dynamics CRM 2015Online Update1 new feature之表单页Tabs切换

    CRM2011的界面相对于CRM4.0进行了比较大的改动,N久没见过4.0的界面了所以忘了表单是什么样子的了,但2011的表单中若含有多个tab的话,是可以通过左侧栏进行切换,话说2013的界面相对2 ...

  2. ajax核心技术1---XMLHttpRequset对象的使用

    AJAX即"Asynchronous Javascript And XML"(异步JavaScript和XML),是指一种创建交互式网页应用的网页开发技术.AJAX = 异步 Ja ...

  3. Tensorflow使用Cmake在Windows下生成VisualStudio工程并编译

    传送门: https://github.com/tensorflow/tensorflow/tree/r0.12/tensorflow/contrib/cmake http://www.udpwork ...

  4. J2EE学习从菜鸟变大鸟之四 JNDI(Java Naming and Directory Interface)

    掌握 J2EE 是件不是很轻松的事哈,但是很有意思,抽象抽象哈哈,因为它包含的技术和缩略语在不断地增长.Java 命名和目录接口(Java Naming and Directory Interface ...

  5. TCP的流量控制与拥塞控制小结

    概述 为了提高信道的利用率TCP协议不使用停止等待协议,而是使用连续ARQ协议,意思就是可以连续发出若干个分组然后等待确认,而不是发送一个分组就停止并等待该分组的确认.其中TCP的流量控制与拥塞控制是 ...

  6. Java中的五种单例模式

    Java模式之单例模式: 单例模式确保一个类只有一个实例,自行提供这个实例并向整个系统提供这个实例. 特点: 1,一个类只能有一个实例 2 自己创建这个实例 3 整个系统都要使用这个实例 例: 在下面 ...

  7. eclipse搭建ssh后台

    SSH框架是最常用的框架之一,在搭建SSH框架的时候总有人遇到这样,那样的问题.下面我介绍一下SSH框架搭建的全过程.  第一步:准备工作.    下载好eclipse,Struts2,Spring, ...

  8. 支持老版本IE的3种解决方案

    原文链接: 3 Solutions for Supporting Internet Explorer 翻译人员: 铁锚 翻译时间: 2014年2月14日 在刚发布的那几年,Internet Explo ...

  9. 解决unbuntu14.04上的eclipse自动退出的问题

    新安装的ubuntu14.04版,把以前12.04上正常使用的eclipse拷贝到14.04上后,启动eclipse后,输入代码时出现点"."提示符就会自动重启. jdk是1.7. ...

  10. CRM导入组织报实例名称必须与计算机名称相同的问题

    今天采用P2V拷贝了一台CRM数据库到虚机上,因为要加域必须得把计算机名改了,然后再重新导入组织的时候报错了:"实例名称必须与计算机名称相同",google了下没有匹配的问题答案, ...