JQuery小案例：分组

最新推荐文章于 2021-03-25 17:38:30 发布

Taciturn_志锴

最新推荐文章于 2021-03-25 17:38:30 发布

阅读量346

点赞数

本文链接：https://blog.csdn.net/qq_43596152/article/details/108367884

版权

分组小案例演示：

首先我们使用HTML完成如下效果
分别设置四个小按钮，使用JQuery完成功能的设置
在这里插入图片描述
HTML代码如下：


<select id="left" multiple style="width: 300px; height: 300px;">
    <option value="张三">张三</option>
    <option value="李四">李四</option>
    <option value="王五">王五</option>
    <option value="赵六">赵六</option>
    <option value="田七">田七</option>
    <option value="崔八">崔八</option>
</select>

<input type="button" value="右移" id="toRight">
<input type="button" value="右移全部" id="toRightAll">
<input type="button" value="左移" id="toLeft">
<input type="button" value="左移全部" id="toLeftAll">

<select id="right" multiple style="width: 300px; height: 300px;">
    <option value="小明">小明</option>
    <option value="小红">小红</option>
    <option value="小黑">小黑</option>
    <option value="小绿">小绿</option>
    <option value="小韩">小韩</option>
    <option value="小炮">小炮</option>
</select>

总的代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    //导入JQuery文件
    <script type="text/javascript" src="../js/jquery-1.7.2.js"></script>
    <script type="text/javascript">
    //	JQuery代码，文档就绪函数
        $(function () {
        //在这里可以把selected换成last，在移动元素的时候就指定为最后一个元素移动，而不是通过
        //鼠标来选择元素，
            $("#toRight").click(function () {
                $("#right").append($("#left option:selected"));
            });
            //四个按钮都使用了选择器
            $("#toRightAll").click(function () {
                $("#right").append($("#left option"));
            });
            $("#toLeft").click(function () {
                $("#left").append($("#right option:selected"))
            })
            $("#toLeftAll").click(function () {
                $("#left").append($("#right option"))
            })
        });
    </script>
</head>
<body>

<select id="left" multiple style="width: 300px; height: 300px;">
    <option value="张三">张三</option>
    <option value="李四">李四</option>
    <option value="王五">王五</option>
    <option value="赵六">赵六</option>
    <option value="田七">田七</option>
    <option value="崔八">崔八</option>
</select>

<input type="button" value="右移" id="toRight">
<input type="button" value="右移全部" id="toRightAll">
<input type="button" value="左移" id="toLeft">
<input type="button" value="左移全部" id="toLeftAll">

<select id="right" multiple style="width: 300px; height: 300px;">
    <option value="小明">小明</option>
    <option value="小红">小红</option>
    <option value="小黑">小黑</option>
    <option value="小绿">小绿</option>
    <option value="小韩">小韩</option>
    <option value="小炮">小炮</option>
</select>


</body>
</html>