用jquery+CSS实现左右选择框效果

效果如下:

 

用jquery+CSS实现左右选择框效果_第1张图片

代码:

  1. <html xmlns="http://www.w3.org/1999/xhtml" >
  2. <head>
  3.     <title>无标题页title>
  4.     <script src="../Js/jquery.js" type="text/javascript">script>
  5.     <script type="text/javascript">
  6.         $(function(){
  7.   $("#waitPerson option:first,#alreadPerson option:first").attr("selected",true);
  8.             $("#waitPerson").dblclick(function(){
  9.                 $("#waitPerson option:selected").clone().appendTo("#alreadPerson");
  10.                 $("#waitPerson option:selected").remove();
  11.                 $("#waitPerson option:first,#alreadPerson option:first").attr("selected",true);
  12.             });
  13.             
  14.              $("#alreadPerson").dblclick(function(){
  15.                 $("#alreadPerson option:selected").clone().appendTo("#waitPerson");
  16.                 $("#alreadPerson option:selected").remove();
  17.                 $("#alreadPerson option:first,#waitPerson option:first").attr("selected",true);
  18.             });
  19.             
  20.              $("#moveToRight").click(function(){
  21.                 $("#waitPerson option:selected").clone().appendTo("#alreadPerson");
  22.                 $("#waitPerson option:selected").remove();
  23.                 $("#waitPerson option:first,#alreadPerson option:first").attr("selected",true);
  24.             });
  25.             $("#moveToLeft").click(function(){
  26.                 $("#alreadPerson option:selected").clone().appendTo("#waitPerson");
  27.                 $("#alreadPerson option:selected").remove();
  28.                 $("#alreadPerson option:first,#waitPerson option:first").attr("selected",true);
  29.             });
  30.             
  31.             $("#AllToLeft").click(function(){
  32.                 $("#alreadPerson option").clone().appendTo("#waitPerson");
  33.                 $("#alreadPerson option").remove();
  34.                 $("#alreadPerson option:first,#waitPerson option:first").attr("selected",true);
  35.             });
  36.             
  37.             $("#AllToRight").click(function(){
  38.                 $("#waitPerson option").clone().appendTo("#alreadPerson");
  39.                 $("#waitPerson option").remove();
  40.                 $("#waitPerson option:first,#alreadPerson option:first").attr("selected",true);
  41.             });
  42.         });
  43.     script> 
  44.     <style type="text/css">
  45.         body
  46.         {
  47.             margin:0px;
  48.             padding:0px;
  49.             font-size:12px; 
  50.         }
  51.         #left
  52.         {
  53.             width:30%;
  54.             float:left;
  55.         }
  56.         #moveToRight
  57.         {
  58.             width: 118px;
  59.             display:block;
  60.         }
  61.         #moveToLeft
  62.         {
  63.             width: 119px;
  64.             display:block;
  65.         }
  66.         #right
  67.         {     
  68.             width:36%;      
  69.             float:left;
  70.         }
  71.         
  72.         #btns
  73.         {
  74.             float:left;
  75.             width: 30%;
  76.             margin:5px;
  77.         }
  78.         
  79.         #container
  80.         {           
  81.             width:500px;    
  82.         }
  83.         #waitPerson
  84.         {
  85.             height: 165px;
  86.             width:100%px;
  87.         }
  88.         #alreadPerson
  89.         {
  90.             height: 171px;
  91.             width:100px;
  92.         }
  93.         
  94.         h4
  95.         {
  96.             height:25px;
  97.             text-align:center;
  98.             background-color:#F6F6F6    
  99.         }
  100.         
  101.         div
  102.         {
  103.             border:1px solid #CCCCCC;
  104.         }
  105.         
  106.         span
  107.         {
  108.             display:block;  
  109.             font-size:13px;
  110.             font-weight:bold;
  111.             text-align:center;
  112.             height:25px;
  113.             line-height:25px;
  114.             border:1px solid #CCCCCC;
  115.             background-color:#F6F6F6    
  116.         }
  117.     style>
  118. head>
  119. <body>
  120.    <div id="container">
  121.         <div>
  122.             <span>人员选择span>
  123.             <div id="left">
  124.                 <span>左边项span>
  125.                 <select id="waitPerson" multiple="multiple">
  126.                     <option>人员一option>
  127.                     <option>人员二option>
  128.                     <option>人员三option>
  129.                 select>
  130.             div>
  131.             <div id="btns" style="border:none">
  132.                 <input id="moveToRight" type="button" value="向右移动" />
  133.                 <input id="moveToLeft" type="button" value="向左移动" />
  134.                 <input id="AllToRight" type="button" value="全部向右移动" />
  135.                 <input id="AllToLeft" type="button" value="全部向左移动" />
  136.             div>
  137.             <div id="right">
  138.                 <span>右边项span>
  139.                 <select id="alreadPerson" multiple="multiple">
  140.                     <option>人员四option>
  141.                     <option>人员五option>
  142.                     <option>人员六option>
  143.                 select>
  144.             div>
  145.         div>
  146.      div>
  147. body>
  148. html>

你可能感兴趣的:(用jquery+CSS实现左右选择框效果)