• 【四】jquery之文档处理习题(内部处理、外部处理)[移动节点]


    参考资料:http://jquery.cuishifeng.cn/index.html

    代码:

    <!DOCTYPE html>
    <html>
    <head>
    <style type="text/css">
        select{        
            height: 140px;
            border: #000 1px solid;        
        }
    </style>
        <script type="text/javascript" src="jquery-3.3.1.js"></script>
        <meta charset="UTF-8">
    </head>
    <body>
        <select multiple="multiple" id="select1">
          <option value="看书">看书</option>
          <option value="旅游">旅游</option>
          <option value="运动">运动</option>
          <option value="购物">购物</option>
        </select>
        <input type="button" value="<==" id="b4">
        <input type="button" value="<=" id="b3">
        <input type="button" value="=>" id="b1">
        <input type="button" value="==>" id="b2">
        <select multiple="multiple" id="select2">
          <option value="游戏">游戏</option>
        </select>
        <script type="text/javascript">
        $(document).ready(function(){
            //给id为b1的按钮绑定click事件
            $("#b1").click(function(){
                // alert($("#select1 option:selected").val());
                // id为select1且option为选中状态的元素添加到id为select2下
                $("#select1 option:selected").appendTo($("#select2"));
            });
        });
        $(document).ready(function(){
            $("#b2").click(function(){
                $("#select1 option").appendTo($("#select2"));
            })
        });
        $(document).ready(function(){
            $("#b3").click(function(){
                $("#select2 option:selected").appendTo($("#select1"));
            })
        });
        $(document).ready(function(){
            $("#b4").click(function(){
                $("#select2 option").appendTo($("#select1"));
            })
        });
        $(document).dblclick(function(){
            $("#select1 option:selected").appendTo($("#select2"));
        });
        </script>
    </body>
    </html>

    界面显示:

  • 相关阅读:
    MongoDB中常用的find
    MongoDB文档的增删改操作
    我的notepad++
    MongoDB入门知识
    Python基础5-常用模块
    Python基础4
    Python基础3(2017-07-20)
    Python基础2(2017-07-18)
    Python基础1(2017-07-16)
    Python简介(2017-07-16)
  • 原文地址:https://www.cnblogs.com/8013-cmf/p/8428188.html
Copyright © 2020-2023  润新知