关键字: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. 最简单的视频网站(JavaEE+FFmpeg)

    本文记录一个最简单的视频网站系统.此前做过一些基于JavaEE中的SSH (Strut2 + Spring + Hibernate)的网站系统,但是一直没有做过一个视频网站系统,所以就打算做一个&qu ...

  2. 成员函数的const到底修饰的是谁

    demo <pre name="code" class="cpp">class Test { public: const void OpVar(in ...

  3. hadoop cdh5的pig隐式转化(int到betyarray)不行了

    cdh3上,pig支持int到chararray的隐式转化,但到cdh5不行. pig code is as follows: %default Cleaned_Log /user/usergroup ...

  4. Android初级教程三个Dialog对话框小案例

    这里把三个对话框形式写在一个项目程序里面,用三个按钮控制显示什么样式的对话框. 先看布局文件代码: <LinearLayout xmlns:android="http://schema ...

  5. 【项目管理】 PMBOK 基础概念 (引论 PMBOK 笔记)

    好紧张, 3月28考试, 全力学 PMP ~~ 一. 项目 1. 项目的定义 项目 : 项目是为创造 独特 的 产品, 服务 或 成果 而进行的 临时性 工作; -- 独特 : 独特性是项目的特征, ...

  6. Java进阶(一)Java内存解析

    栈.堆.常量池等虽同属Java内存分配时操作的区域,但其适用范围和功用却大不相同.本文将深入Java核心,简单讲解Java内存分配方面的知识. 首先我们先来讲解一下内存中的各个区域. stack(栈) ...

  7. ffmpeg转码器移植VC的工程:ffmpeg for MFC

    本文介绍一个自己做的FFMPEG移植到VC下的开源工程:ffmpeg for MFC.本工程将ffmpeg工程中的ffmpeg转码器(ffmpeg.c)移植到了VC环境下.并且使用MFC做了一套简单的 ...

  8. React Native控件之Listview

    ListView组件用于显示一个垂直的滚动列表,其中的元素之间结构近似而仅数据不同. ListView更适于长列表数据,且元素个数可以增删.和ScrollView不同的是,ListView并不立即渲染 ...

  9. C++ Primer 有感(标准库vector及迭代器)

    vector是同一种对象的集合,每个对象都有一个对应的整数索引值.和string对象一样,标准库将负责管理与存储元素相关的类存.引入头文件 #include<vector> 1.vecto ...

  10. 看到个有趣的方法批量下载rtf模板

    一般想要批量下载rtf模板我们都是用fndload来实现或者 perl download.pl来实现,今天看到一个比较有趣的方法 Hi, Blob column 'template file data ...