jquery之文档处理习题（内部处理外部处理）

Posted 2020-10-23 花花妹子最努力~

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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之文档处理习题（内部处理外部处理）的主要内容，如果未能解决你的问题，请参考以下文章