jq 城市选择案例

最新推荐文章于 2021-05-17 16:54:59 发布

weixin_34183910

最新推荐文章于 2021-05-17 16:54:59 发布

阅读量489

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/lujieting/p/10104812.html

版权

<style>
        select {
            width: 200px;
            background-color: teal;
            height: 200px;
            font-size: 20px;
        }

        .btn-box {
            width: 30px;
            display: inline-block;
            vertical-align: top;
        }
    </style>
</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>
</select>
<div class="btn-box">
    <!--实体字符-->
    <button id="btn1"> &gt;&gt; </button>
    <button id="btn2"> &lt;&lt; </button>
    <button id="btn3"> &gt;</button>
    <button id="btn4"> &lt; </button>
</div>
<select id="tar-city" name="tar-city" multiple>
</select>
<script src="jquery-1.12.4.js"></script>
<script>
    $(function () {
        $("#btn1").click(function () {
           $("#src-city>option").appendTo("#tar-city");
        });
        $("#btn2").click(function () {
            $("#src-city").append($("#tar-city>option"));
        });
        $("#btn3").click(function () {
            $("#src-city>option:selected").appendTo("#tar-city");
        });
        $("#btn4").click(function () {
            $("#src-city").append($("#tar-city>option:selected"));
        });
    });
</script>

转载于:https://www.cnblogs.com/lujieting/p/10104812.html

weixin_34183910

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
jq 城市选择案例

<style> select { width: 200px; background-color: teal; height: 200px; font-size: 20px; } .btn-box { width: 30px; ...
复制链接

扫一扫