jq----城市选择

最新推荐文章于 2019-03-08 19:48:00 发布

liuyi0604

最新推荐文章于 2019-03-08 19:48:00 发布

阅读量360

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/liuyi0604/article/details/82316370

这篇博客主要展示了使用jQuery实现城市选择的示例和运行效果，通过交互式操作实现省市区三级联动。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="C:\Users\PC\Desktop\jquery-3.3.1.js"></script>
    <!-- ctrl+shift+g包裹 -->
    <script>
        $(document).ready(function(){
            $("#btn-sel-all").on("click",function(){
                $("#src-city option").appendTo("#tar-city");
            });
            $("#btn-sel-none").on("click",function(){
                $("#tar-city option").appendTo("#src-city");
            });
            $("#btn-sel").on("click",function(){
                $("#src-city option:selected").appendTo("#tar-city");
            });
            $("#btn-back").on("click",function(){
                $("#tar-city option:selected").appendTo("#src-city");
            });
        });
    </script>
</head>
<body>
    <select name="src-city" id="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="btn-sel-all">&gt;&gt;</button>
        <button id="btn-sel-none">&lt;&lt;</button>
        <button id="btn-back">&lt;</button>
        <button id="btn-sel">&gt;</button>
    </div>
    <select name="tar-city" id="tar-city" multiple>

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

jq----城市选择

运行结果