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

发布时间:2017-7-1 11:42:37编辑:www.fx114.net 分享查询网我要评论
本篇文章主要介绍了"jquery书写左右两个多选下拉列表交换移除功能 ",主要涉及到jquery书写左右两个多选下拉列表交换移除功能 方面的内容,对于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>

效果如图:


上一篇:C#报错"线程间操作无效: 从不是创建控件“XXX”的线程访问它"--解决示例
下一篇:第7章 RAID

相关文章

相关评论

本站评论功能暂时取消,后续此功能例行通知。

一、不得利用本站危害国家安全、泄露国家秘密,不得侵犯国家社会集体的和公民的合法权益,不得利用本站制作、复制和传播不法有害信息!

二、互相尊重,对自己的言论和行为负责。

好贷网好贷款