Jquery选择水果案例

最新推荐文章于 2022-08-07 13:30:03 发布

zuo_zuo_blog

最新推荐文章于 2022-08-07 13:30:03 发布

阅读量1.1k

点赞数

分类专栏： JQuery

本文链接：https://blog.csdn.net/zuo_zuo_blog/article/details/89948543

版权

JQuery 专栏收录该内容

28 篇文章 0 订阅

订阅专栏

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        select{
            width:170px;
            height:240px;
            background-color: #2cff2f;
            font-size: 18px;
        }
    </style>
    <script src="js/jquery-1.11.1.js"></script>
    <script>
        $(function () {
            $("button:eq(0)").click(function () {
                $("#sel2").append($("#sel1 option"));
            });
            $("button:eq(1)").click(function () {
                $("#sel1").append($("#sel2 option"));
            });
            $("button:eq(2)").click(function () {
                $("#sel2").append($("#sel1 option:selected"));
            });
            $("button:eq(3)").click(function () {
                $("#sel1").append($("#sel2 option:selected"));
            });
        });
    </script>
</head>
<body>
<select name="" id="sel1" size="10" multiple>
    <option value="">香蕉</option>
    <option value="">苹果</option>
    <option value="">鸭梨</option>
    <option value="">葡萄</option>
</select>

<button>>>></button>
<button><<<</button>
<button>></button>
<button><</button>

<select name="" id="sel2" size="10" multiple>

</select>

</body>
</html>

zuo_zuo_blog

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
Jquery选择水果案例

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> select{ width:170px; ...
复制链接

扫一扫