JavaWeb小案例-2

最新推荐文章于 2023-10-05 15:06:32 发布

horizonTel

最新推荐文章于 2023-10-05 15:06:32 发布

阅读量743

点赞数

分类专栏：前端文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/weixin_52003758/article/details/122755822

版权

前端专栏收录该内容

3 篇文章 0 订阅

订阅专栏

JavaWeb小案例

实现功能

在这里插入图片描述

从左到右
从右到左

代码实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>test</title>
    <script type="text/javascript" src="../jquery-3.6.0.js"></script>
    <script type="text/javascript">
        $(function (){
            $("button:eq(0)").click(function (){
                $("select:eq(0) option:selected").appendTo($("select:eq(1)"));  // option:selected指的是选择被选中的内容
            })

            $("button:eq(1)").click(function (){
                $("select:eq(1) option:selected").appendTo($("select:eq(0)"));  // select:eq(0)指的是第一个select标签
            })
        })
    </script>
</head>

<body>
    <div id="left" style="float: left; margin-right: 20px;">
        <select multiple="multiple" name="select1" style="width : 100px; height : 135px;">
            <option value="opt01">选项1</option>
            <option value="opt02">选项2</option>
            <option value="opt03">选项3</option>
            <option value="opt04">选项4</option>
            <option value="opt05">选项5</option>
            <option value="opt06">选项6</option>
        </select>
        <br>
        <button>选中添加到右边</button>
    </div>
    <div id="right">
        <select multiple="multiple" name="select2" style="width: 100px; height: 135px;">
        </select>
        <br>
        <button>选中添加到左边</button>
    </div>
</body>
</html>

horizonTel

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
JavaWeb小案例-2

JavaWeb小案例实现功能从左到右从右到左代码实现<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>test</title> <script type="text/javascript" src="../jquery-3.6.0.js"></script> <script
复制链接

扫一扫