xiaoguozi's Blog
Pay it forword - 我并不觉的自豪，我所尝试的事情都失败了······习惯原本生活的人不容易改变，就算现状很糟，他们也很难改变，在过程中，他们还是放弃了······他们一放弃，大家就都是输家······让爱传出去，很困难，也无法预料，人们需要更细心的观察别人，要随时注意才能保护别人，因为他们未必知道自己要什么·····
jQuery 左右移动

 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>New Web Project</title>
    </head>
    <script src="lib/jquery/jquery-1.3.2.min.js"></script>
    <body>
        <table>
            <tr>
                <td>
                    <select multiple id="select1" style="width: 100px;height:160px;">
                       <option value="1" title="test">选项1</option>
                       <option value="2">选项2</option>
                       <option value="3">选项3</option>
                       <option value="4">选项4</option>
                       <option value="5">选项5</option>
                       <option value="6">选项6</option>
                       <option value="7">选项7</option>
                       <option value="8">选项8</option>
                      </select>
                </td>
                <td>
                    <a href="#" id="delOption">删除</a><br />
                    <a href="#" id="left_up">上移</a><br />
                    <a href="#" id="left_down">下移</a><br />
                    <a href="#" id="allToLeft">全部右移</a><br />
                    <a href="#" id="allToRight">全部左移</a><br />
                    <a href="#" id="add">添加到右边&gt;&gt;</a><br />
                    <a href="#" id="del">&lt;&lt;添加到左边</a>
                </td>
                <td>
                    <select multiple id="select2" style="width: 100px;height:160px;">
                       
                      </select>
                </td>
            </tr>
        </table>
    <script>
        $("#allToLeft").click(function(){
            $("#select1 option").appendTo("#select2");
        });
        $("#allToRight").click(function(){
            $("#select2 option").appendTo("#select1");
        });
        $("#delOption").click(function(){
            $("#select1 option:selected").remove();
        });
        $("#left_up").click(function(){
            var index =  $('#select1 option').index($('#select1 option:selected:first'));
            var $recent =  $('#select1 option:eq('+(index-1)+')');
            if(index>0){
                var $options = $('#select1 option:selected').remove();
                setTimeout(function(){
                  $recent.before($options )
                },10);
            }
        });
        $('#left_down').click(function(){
            var index =  $('#select1 option').index($('#select1 option:selected:last'));
            var len = $('#select1 option').length-1;
            var $recent =  $('#select1 option:eq('+(index+1)+')');
            if(index<len ){
                var $options = $('#select1 option:selected').remove();
                setTimeout(function(){
                    $recent.after( $options )
                },10);
            }
       });
        $("#add").click(function(){
            $("#select1 option:selected").appendTo("#select2");
        });
        $("#del").click(function(){
            $("#select2 option:selected").appendTo("#select1");
        });
        $("#select1").dblclick(function(){
            $("option:selected",this).appendTo("#select2");
        });
        $("#select2").dblclick(function(){
            $("option:selected",this).appendTo("#select1");
        });
    </script>
    </body>
</html>
posted on 2009-08-29 22:22 小果子 阅读(620) 评论(0)  编辑 收藏 引用 所属分类: 框架

只有注册用户登录后才能发表评论。
网站导航: 博客园   IT新闻   BlogJava   知识库   博问   管理


Copyright ©2024 小果子 Powered By博客园 模板提供：沪江博客