关键字：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()); 

       } 

     } 

   }); 

});