b站 4天从零玩转jQuery【黑马程序员】部分案例代码_城市选择案例

本文链接：https://blog.csdn.net/qq_45801837/article/details/106338026

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        select{
            background-color: teal;
            font-size: 20px;
            width: 200px;
            height:300px;
        }
        option{
            font-weight: normal;
            display: block;
            white-space: pre;
            min-height: 1.2em;
            padding:0 2px 1px;
        }
        .btn-box {
            width: 30px;
            display: inline-block;
            vertical-align: top;
        }
    </style>
    <script src="jquery-3.5.1.js"></script>
    <script>
        $(function(){
            //1.全部到右边
            $("#btn-sel-all").click(function(){
                //找到左边select下拉菜单的所有option项，把这些option项都添加到右边的select下拉菜单中去
                $("#src-city>option").appendTo($("#tar-city"));
            });
            //2.全部到左边
            $("#btn-sel-none").click(function(){
                $("#tar-city>option").appendTo($("#src-city"));
            });
            //3.选中的到右边
            $("#btn-sel").click(function(){
                $("#src-city>option:selected").appendTo($("#tar-city"));
            });
            //4.选中的到左边
            $("#btn-back").click(function(){
                $("#tar-city>option:selected").appendTo($("#src-city"));
            });
        })

    </script>
</head>
<body>
<h1>城市选择：</h1>
<select id="src-city" name="src-city" multiple>
    <option value="1">北京</option>
    <option value="2">上海</option>
    <option value="3">广东</option>
    <option value="4">深圳</option>
    <option value="5">青岛</option>
    <option value="6">南宁</option>
    <option value="7">郑州</option>
    <option value="8">成都</option>
</select>
<div class="btn-box">
    <!--实体字符-->
    <button id="btn-sel-all"> &gt;&gt;</button>
    <button id="btn-sel-none"> &gt;&gt;</button>
    <button id="btn-sel"> &gt;</button>
    <button id="btn-back"> &gt;</button>
</div>
<select id="tar-city" name="tar-city" multiple>

</select>
</body>
</html>