JQuery--选择水果小案例

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

马德里甜欣

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

阅读量620

点赞数

本文链接：https://blog.csdn.net/weixin_51564923/article/details/122205251

版权

jQuery select 动态操作选项复制按钮事件

关键词由CSDN通过智能技术生成

首先设置好页面，排版两个select表，其中第一个表内填充好option，第二个表是空表，以便测试将1表中的水果选择至2表中。

设置好四个按钮：1>2全部挪动 2>1全部挪动单个向左挪动单个向右挪动

代码如下：（一定要记得引入JQuery文件，不然会报错的）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    select{
        width: 300px;
        height: 300px;
        background-color: aquamarine;
    }
</style>
<body>
    <select name="" id="sell1" multiple> 
        <option value="0">苹果</option>
        <option value="1">香蕉</option>
        <option value="2">鸭梨</option>
        <option value="3">柚子</option>
    </select>
    <button> >>> </button>
    <button> <<< </button>
    <button> > </button>
    <button><</button>
    <select name="" id="sell2"multiple></select>
    <script src="./jquery-1.11.1.min.js">
    </script>
    <script>
             $(function(){
            $("button").eq(0).click(function(){
                $("#sell2").append($("#sell1 option"))
            })
            $("button").eq(1).click(function(){
                $("#sell1").append($("#sell2 option"))
            })
            $("button ").eq(2).click(function(){
                $("#sell2").append($("#sell1 option:selected "))
            })
            $("button").eq(3).click(function(){
                $("#sell1").append($("#sell2  option:selected"))
            })
        })</script>
</body>
</html>