效果如下:
代码:
- <!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>
- <title>无标题页</title>
- <script src="../Js/jquery.js" type="text/javascript"></script>
- <script type="text/javascript">
- $(function(){
- $("#waitPerson option:first,#alreadPerson option:first").attr("selected",true);
- $("#waitPerson").dblclick(function(){
- $("#waitPerson option:selected").clone().appendTo("#alreadPerson");
- $("#waitPerson option:selected").remove();
- $("#waitPerson option:first,#alreadPerson option:first").attr("selected",true);
- });
- $("#alreadPerson").dblclick(function(){
- $("#alreadPerson option:selected").clone().appendTo("#waitPerson");
- $("#alreadPerson option:selected").remove();
- $("#alreadPerson option:first,#waitPerson option:first").attr("selected",true);
- });
- $("#moveToRight").click(function(){
- $("#waitPerson option:selected").clone().appendTo("#alreadPerson");
- $("#waitPerson option:selected").remove();
- $("#waitPerson option:first,#alreadPerson option:first").attr("selected",true);
- });
- $("#moveToLeft").click(function(){
- $("#alreadPerson option:selected").clone().appendTo("#waitPerson");
- $("#alreadPerson option:selected").remove();
- $("#alreadPerson option:first,#waitPerson option:first").attr("selected",true);
- });
- $("#AllToLeft").click(function(){
- $("#alreadPerson option").clone().appendTo("#waitPerson");
- $("#alreadPerson option").remove();
- $("#alreadPerson option:first,#waitPerson option:first").attr("selected",true);
- });
- $("#AllToRight").click(function(){
- $("#waitPerson option").clone().appendTo("#alreadPerson");
- $("#waitPerson option").remove();
- $("#waitPerson option:first,#alreadPerson option:first").attr("selected",true);
- });
- });
- </script>
- <style type="text/css">
- body
- {
- margin:0px;
- padding:0px;
- font-size:12px;
- }
- #left
- {
- width:30%;
- float:left;
- }
- #moveToRight
- {
- width: 118px;
- display:block;
- }
- #moveToLeft
- {
- width: 119px;
- display:block;
- }
- #right
- {
- width:36%;
- float:left;
- }
- #btns
- {
- float:left;
- width: 30%;
- margin:5px;
- }
- #container
- {
- width:500px;
- }
- #waitPerson
- {
- height: 165px;
- width:100%px;
- }
- #alreadPerson
- {
- height: 171px;
- width:100px;
- }
- h4
- {
- height:25px;
- text-align:center;
- background-color:#F6F6F6
- }
- div
- {
- border:1px solid #CCCCCC;
- }
- span
- {
- display:block;
- font-size:13px;
- font-weight:bold;
- text-align:center;
- height:25px;
- line-height:25px;
- border:1px solid #CCCCCC;
- background-color:#F6F6F6
- }
- </style>
- </head>
- <body>
- <div id="container">
- <div>
- <span>人员选择</span>
- <div id="left">
- <span>左边项</span>
- <select id="waitPerson" multiple="multiple">
- <option>人员一</option>
- <option>人员二</option>
- <option>人员三</option>
- </select>
- </div>
- <div id="btns" style="border:none">
- <input id="moveToRight" type="button" value="向右移动" />
- <input id="moveToLeft" type="button" value="向左移动" />
- <input id="AllToRight" type="button" value="全部向右移动" />
- <input id="AllToLeft" type="button" value="全部向左移动" />
- </div>
- <div id="right">
- <span>右边项</span>
- <select id="alreadPerson" multiple="multiple">
- <option>人员四</option>
- <option>人员五</option>
- <option>人员六</option>
- </select>
- </div>
- </div>
- </div>
- </body>
- </html>