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

最新推荐文章于 2023-05-06 09:22:32 发布

xochenlin

最新推荐文章于 2023-05-06 09:22:32 发布

阅读量6.4k

点赞数

文章标签： jquery css function button float border

本文链接：https://blog.csdn.net/xochenlin/article/details/3716095

版权

效果如下:

代码:

 
 <!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>
 

xochenlin

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
用jquery+CSS实现左右选择框效果

效果如下: 代码:html xmlns="http://www.w3.org/1999/xhtml" >head> title>无标题页title> script src="../Js/jquery.js" type="text/javascript">script> script type="text/javascript">
复制链接

扫一扫