jquery移动listbox的值

最新推荐文章于 2016-02-23 09:00:00 发布

光着脚丫数星星

最新推荐文章于 2016-02-23 09:00:00 发布

阅读量722

点赞数

分类专栏： Web前端文章标签： JQuery应用

本文链接：https://blog.csdn.net/youyou_yo/article/details/47315785

版权

Web前端专栏收录该内容

47 篇文章 0 订阅

订阅专栏

 
 <!DOCTYPE html PUBLIC  
 "-//W3C//DTD XHTML 1.0 Transitional//EN" 
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" 
 > 
 
 <html xmlns= 
 "http://www.w3.org/1999/xhtml" 
  > 
 
 <head> 
 
 <meta http-equiv= 
 "Content-Type" 
  content= 
 "text/html; charset=UTF-8" 
  /> 
 
 <title>jQuery移动ListBox内容</title>   
 
 <meta name= 
 "copyright" 
  content= 
 "©http://hyipaying.com " 
  /> 
 
 <style type= 
 "text/css" 
 > 
 
 h1{color:Green;} 
 
 #listLeft{width:100px;} 
 
 .normal{ color:Blue; font-weight:bold; font-size:14px; background: 
 #FF9933; 
 
 width: 95px; 
 
 } 
 
 </style> 
 
 <script type= 
 "text/javascript" 
  src= 
 "http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" 
 ></script>      
 
 <script type= 
 "text/javascript" 
 > 
 
 $(document).ready( 
 function 
 () { 
 
 //data 
 
 var 
  vData = {  
 "datalist" 
 : 
 
 [ 
 
 {  
 "data" 
 :  
 "jQuery" 
 ,  
 "text" 
 :  
 "jQuery" 
  }, 
 
 {  
 "data" 
 :  
 "Asp.net" 
 ,  
 "text" 
 :  
 "Asp.net" 
  }, 
 
 {  
 "data" 
 :  
 "internet" 
 ,  
 "text" 
 :  
 "internet" 
  }, 
 
 {  
 "data" 
 :  
 "Sql" 
 ,  
 "text" 
 :  
 "Sql" 
  } 
 
 ] 
 
 }; 
 
 //bind data 
 
 var 
  vlist =  
 "" 
 ; 
 
 //遍历json数据 
 
 jQuery.each(vData.datalist,  
 function 
 (i, n) { 
 
 vlist +=  
 "<option value=" 
  + n.data +  
 ">" 
  + n.text +  
 "</option>" 
 ; 
 
 }); 
 
 //绑定数据到listLeft 
 
 $( 
 "#listLeft" 
 ).append(vlist); 
 
 //right move 
 
 $( 
 "#btnRight" 
 ).click( 
 function 
 () { 
 
 moveright(); 
 
 }); 
 
 //double click to move left 
 
 $( 
 "#listLeft" 
 ).dblclick( 
 function 
 () { 
 
 moveright(); 
 
 }); 
 
 //left move  
 
 $( 
 "#btnLeft" 
 ).click( 
 function 
 () { 
 
 moveleft(); 
 
 }); 
 
 //double click to move right 
 
 $( 
 "#listRight" 
 ).dblclick( 
 function 
 () { 
 
 moveleft(); 
 
 }); 
 
 function 
  moveright() { 
 
 //数据option选中的数据集合赋值给变量vSelect 
 
 var 
  vSelect = $( 
 "#listLeft option:selected" 
 ); 
 
 //克隆数据添加到listRight中 
 
 vSelect.clone().appendTo( 
 "#listRight" 
 ); 
 
 //同时移除listRight中的option 
 
 vSelect.remove(); 
 
 } 
 
 function 
  moveleft() { 
 
 var 
  vSelect = $( 
 "#listRight option:selected" 
 ); 
 
 vSelect.clone().appendTo( 
 "#listLeft" 
 ); 
 
 vSelect.remove(); 
 
 } 
 
 }); 
 
 </script> 
 
 </head> 
 
 <body> 
 
 <h1>jQuery移动ListBox内容</h1> 
 
 <div style= 
 "width:240px;" 
 > 
 
 <div style= 
 "width:100px;float:left;" 
 > 
 
 <select size= 
 "4" 
  name= 
 "listLeft" 
  id= 
 "listLeft" 
  class 
 = 
 "normal" 
  title= 
 "双击可实现右移" 
 >  
 
 </select>  
 
 </div> 
 
 <div style= 
 "width:40px;float:left; padding-top:20px;" 
 > 
 
 <input type= 
 "button" 
  id= 
 "btnRight" 
  value= 
 ">>" 
  /><br /> 
 
 <input type= 
 "button" 
  id= 
 "btnLeft" 
  value= 
 "<<" 
  /> 
 
 </div> 
 
 <div style= 
 "width:100px;float:left;" 
 > 
 
 <select size= 
 "4" 
  name= 
 "listRight" 
  id= 
 "listRight" 
  class 
 = 
 "normal" 
  title= 
 "双击可实现左移" 
 >  
 
 </select> 
 
 </div> 
 
 </div> 
 
 </body> 
 
 </html>