jQuery 左右移动

最新推荐文章于 2023-07-15 11:23:04 发布

JingJiaGuo

最新推荐文章于 2023-07-15 11:23:04 发布

阅读量507

点赞数

文章标签： jquery function up

本文链接：https://blog.csdn.net/JingJiaGuo/article/details/6474303

版权

<!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">添加到右边>></a><br />
                    <a href="#" id="del"><<添加到左边</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>