jquery书写左右两个多选下拉列表交换移除功能

使用jquery做一个多选列表左右互换的功能,代码如下

复制代码
<!DOCTYPE HTML>
<html lang="en-US">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="http://cdn.bootcss.com/jquery/2.2.4/jquery.js"></script>
</head>
<body>
    <div>
        <div>
            <div style="display:inline-block;">
                <div>1组用户</div>
                <select name="" multiple="multiple" style="height:200px;" id="left_select">
                    <option value="101">用户101</option>
                    <option value="102">用户102</option>
                    <option value="103">用户103</option>
                    <option value="104">用户104</option>
                    <option value="105">用户105</option>
                    <option value="106">用户106</option>
                    <option value="107">用户107</option>
                </select>
            </div>
            <div style="display:inline-block;height: 200px;vertical-align: middle;">
                <button type="button" id="left_btn">>></button>
                <button type="button" id="right_btn"><<</button>
            </div>
            <div style="display:inline-block;">
                <div>2组用户</div>
                <select name="" multiple="multiple" style="height:200px;" id="right_select">
                    <option value="201">用户201</option>
                    <option value="202">用户202</option>
                    <option value="203">用户203</option>
                    <option value="204">用户204</option>
                    <option value="205">用户205</option>
                    <option value="206">用户206</option>
                    <option value="207">用户207</option>
                </select>
            </div>
            <div></div>
        </div>
    </div>
    
    <script type="text/javascript">
        $(function(){
            //页面加载完毕后开始执行的事件
            //点击左边select 去右边
            $("#left_btn").click(function(){
                $("#left_select option:selected").each(function(){
                    $("#right_select").append($(this).prop("outerHTML"));
                    $(this).remove();
                });
            });

            //点击右边select 去左边
            $("#right_btn").click(function(){
                $("#right_select option:selected").each(function(){
                    $("#left_select").append($(this).prop("outerHTML"));
                    $(this).remove();
                });
            });
        });
    </script>
</body>
</html>
复制代码

效果如图:

 

posted @   李照耀  阅读(945)  评论(0编辑  收藏  举报
编辑推荐:
· 浏览器原生「磁吸」效果!Anchor Positioning 锚点定位神器解析
· 没有源码,如何修改代码逻辑?
· 一个奇形怪状的面试题:Bean中的CHM要不要加volatile?
· [.NET]调用本地 Deepseek 模型
· 一个费力不讨好的项目,让我损失了近一半的绩效!
阅读排行:
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· 没有源码,如何修改代码逻辑?
· PowerShell开发游戏 · 打蜜蜂
· 在鹅厂做java开发是什么体验
· WPF到Web的无缝过渡:英雄联盟客户端的OpenSilver迁移实战
点击右上角即可分享
微信分享提示