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

界面显示：

 

 

 

posted @ 2018-02-07 19:44  花花妹子。  阅读(154)  评论(0)  编辑  收藏  举报