jQuery左右选择框 

<!DOCTYPE html>  
<html>  
<head>  
<title>左右选择框</title>  

<style type="text/css">
/*.s1{width:120px;}
#d1{width:510px;height:320px;background-color:#F5DEB3;margin:0 auto;}
#d2{height:30px;font-size:24px;background-color:blue;color:white;}
#d3{padding-left:30px;}*/
</style>

<script type="text/javascript" src="./jquery-1.4.3.js"></script>
</head>  
<body>  
    <div id="d1">
    <div id="d2">选择</div>
    <div id="d3">
        <table cellpadding="0" cellspacing="8">
            <tbody><tr>
                <td>左</td>
                <td>&nbsp;</td>
                <td>右</td>
            </tr>
            <tr>
                <td>
                    <select id="s1" name="s1" style="width:150px; height:220px;" multiple="multiple">
                        
                        
                        <option value="hh">W1</option>
                    

                    </select>
                </td>
                <td>
                    <p><input id="b1" type="button" class="s1" value="--&gt;"></p>
                    <p><input type="button" id="b2" class="s1" value="--&gt;&gt;"></p>
                    <p><input type="button" id="b3" class="s1" value="&lt;--"></p>
                    <p><input type="button" id="b4" class="s1" value="&lt;&lt;--"></p>
                </td>
                <td><select id="s2" name="s2" style="width:150px;height:220px;" multiple="multiple"><option value="zsf">12321</option><option value="xrr">23</option></select></td>
            </tr>
        </tbody>
        </table>
    </div>
</div>
 <script type="text/javascript">
     $(function(){
    
        $('#b1').click(function(){
            $obj = $('select option:selected').clone(true);
            if($obj.size() == 0){
                alert("请至少选择一条!");
            }
            $('#s2').append($obj);
            $('select option:selected').remove();
        });
        
        $('#b2').click(function(){
            $('#s2').append($('#s1 option'));
        });
        
        $('#b3').click(function(){
            $obj = $('select option:selected').clone(true);
            if($obj.size() == 0){
                alert("请至少选择一条!");
            }
            $('#s1').append($obj);
            $('select option:selected').remove();
        });
        
        $('#b4').click(function(){
            $('#s1').append($('#s2 option'));
        });
        
        $('option').dblclick(function(){
            var flag = $(this).parent().attr('id');
            if(flag == "s1"){
                var $obj = $(this).clone(true);
                $('#s2').append($obj);
                $(this).remove();
            } else {
                var $obj = $(this).clone(true);
                $('#s1').append($obj);
                $(this).remove();
            }
        });
    
    });
 </script>
</body>  
  
</html>

引入jQuery即可

posted on 2017-02-22 17:20  含蓄的龅牙妹  阅读(763)  评论(0)  编辑  收藏  举报

导航