下拉选择框 左右移动 左右添加 

<!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>
    <style type="text/css">
        .content{margin:10px;}
    </style>
</head>

<body>
    <div>

        <div class="content" style="float:left;">
            <select id="select1" multiple="multiple" style="width: 120px;height: 160px;">
                <option value="1">选项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>
            <div>
                <span id="add">选中添加到右边&gt;&gt;</span><br/>
                <span id="add_all">全部添加到右边&gt;&gt;</span>
            </div>
        </div>

        <div class="content" style="float:left;">
            <select id="select2" multiple="multiple" style="width: 120px;height: 160px;">
            </select>
            <div>
                <span id="remove">选中删除到左边&lt;&lt;</span><br />
                <span id="remove_all">全部删除到左边&lt;&lt;</span>
            </div>
        </div>

        <div style="clear:both"></div>
        <div>上一个div的作用，是不允许和上面的两个浮动元素同一行</div>

    </div>
    <script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
    <script type="text/javascript">
        $("#add").click(function () {
            var $option = $("#select1 option:selected");
            var $remove = $option.remove();
            $remove.appendTo("#select2");
            //option排序
            $("#select2 :nth-child(all)").sort(function (a, b) {
                var aText = $(a).text().toUpperCase();
                var bText = $(b).text().toUpperCase();
                if (aText > bText) return 1;
                if (aText < bText) return -1;
                return 0;
            }).appendTo("#select2"); 
        });
        $("#add_all").click(function () {
            var $option = $("#select1 :nth-child(all)");
            var $option1 = $option.attr("selected", true);
            $option.appendTo("#select2");
        });
        $("#remove").click(function () {
            var $option = $("#select2 option:selected");
            var $remove = $option.remove();
            $remove.appendTo("#select1");
        });
        $("#remove_all").click(function () {
            var $option = $("#select2 :nth-child(all)");
            var $option1 = $option.attr("selected", true);
            $option.appendTo("#select1");
        });


    </script>
</body>
</html>

posted @ 2016-06-28 15:28  Chris_在IT道路上前行  阅读(187)  评论(0)    收藏  举报