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 @ 2017-06-21 10:36  李照耀  阅读(943)  评论(0)  编辑  收藏  举报