【四】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>

界面显示：

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