阅读1009 返回首页    go 阿里云 go 技术社区[云栖]

Jquery多选框互相内容交换

<head runat="server">
    <title>无标题页</title>
    <script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
           
            // 把选择项追加给对方
            $('#add').click(function(){
            var options=$('#select1 option:selected');
            var remove=options.remove();
            remove.appendTo("#select2");
            });
        
            // 把所有项追加给对方
            $('#addAll').click(function(){
            var options=$('#select1 option');
            var remove=options.remove();
            remove.appendTo("#select2");
            });
           
            // 把选择项退回给对方
            $('#remove').click(function(){
            var options=$('#select2 option:selected');
            var remove=options.remove();
            remove.appendTo("#select1");
            });
           
            // 把全部项退回给对方
            $('#removeAll').click(function(){
            var options=$('#select2 option');
            var remove=options.remove();
            remove.appendTo("#select1");
            });
                 
        });
    </script>

 

</head>
<body>
    <form runat="server">
    <div >
        <select multiple="multiple" >
        <option>选项1</option>
        <option>选项2</option>
        <option>选项3</option>
        <option>选项4</option>
        <option>选项5</option>
        </select>
    </div>
    <div>
        <span >选中项添加至右边&gt;&gt;</span><br />
        <span >全部添加到右边&gt;&gt;</span>
    </div>
   
    <div >
        <select multiple="multiple" ></select>
    </div>
    <div>
        <span >&lt;&lt;选中项还原至左边</span><br />
        <span >&lt;&lt;全部还原至左边</span>
    </div>
    </form>
</body>

最后更新：2017-04-02 22:16:18

  上一篇：go Jquery中next和children的区别
  下一篇：go 给UIView添加阴影