php jquery 簡單左右選單

By | November 14, 2013
0 Comment

ylbtech-iQuery-select

簡單的jquery 左右select box，記錄一下，不用找就可以用。

<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>

作者：ylbtech
出处：http://ylbtech.cnblogs.com/

jQuery 可以使用google api: https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.js