jQuery：1.5.2，下拉框应用(全部移动，已选移动)

来源：互联网发布：python java go技术栈编辑：程序博客网时间：2024/06/10 03:59

ylbtech-jQuery:jQuery学习

jQuery语法实例

下拉框应用
效果截图

jQuery：1.5.2,下拉框应用（全部移动，已选移动）HTML代码返回顶部

<html xmlns="http://www.w3.org/1999/xhtml"><head>    <title></title>    <script src="js/jquery-1.6.1.min.js" type="text/javascript"></script>    <script type="text/javascript">        $(function () {            $("#add").click(function () {            //1,方式一//                var $option = $("#select1 option:selected");    //获取选中的选项//                var $remove = $option.remove(); //删除下拉列表中选中的选项//                $remove.appendTo("#select2");   //追加给对方                //2，方式二                var $option = $("#select1 option:selected");    //获取选中的选项                $option.appendTo("#select2");   //追加给对方            });            $("#add_all").click(function () {                var $option = $("#select1 option");                $option.appendTo("#select2");            });            $("#remove").click(function () {                var $option = $("#select2 option:selected");                $option.appendTo("#select1");            });            $("#remove_all").click(function () {                var $option = $("#select2 option");                $option.appendTo("#select1");            });        });    </script></head><body><h3>下拉框应用</h3>    <table>        <tr>            <td>                <select id="select1" multiple="multiple" style="width:100px;">                    <option value="News">News</option>                    <option value="Sport">Sport</option>                    <option value="Education">Education</option>                    <option value="Technology">Technology</option>                    <option value="Art">Art</option>                </select>            </td>            <td>                <button id="add">                    >|</button><br />                <button id="add_all">                    >></button><br />                <button id="remove_all">                    <<</button><br />                <button id="remove">                    |<</button>            </td>            <td>                <select id="select2" multiple="multiple"  style="width:100px;">                </select>            </td>        </tr>    </table></body></html>

jQuery：1.5.2.B,效果截图返回顶部

ylbtech-iQuery-select

作者：ylbtech
出处：http://ylbtech.cnblogs.com/
本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则保留追究法律责任的权利。