jQuery_城市选择

最新推荐文章于 2025-11-18 05:03:49 发布

原创最新推荐文章于 2025-11-18 05:03:49 发布 · 1k 阅读

4 ·

CC 4.0 BY-SA版权

jQuery系列专栏收录该内容

30 篇文章

订阅专栏

本文介绍了一个简单的城市选择器实现方案，通过HTML与JavaScript配合使用，实现了从一个选择框向另一个选择框移动选项的功能。该方案支持全部移动、部分移动及双向移动等操作。

想要做一种效果，可以实现选择一个城市点击跳到另一个选择框中
这里写图片描述
HTML结构：

<div class="main">
    <select name="sel_city" id="sel_city" multiple>
        <option value="1">北京</option>
        <option value="2">上海</option>
        <option value="3">深圳</option>
        <option value="4">广州</option>
    </select>
    <div class="btn_class">
        <button class="btn1">&gt;&gt;</button>
        <button class="btn2">&lt;&lt;</button>
        <button class="btn3">&lt;</button>
        <button class="btn4">&gt;</button>
    </div>
    <select name="tar_city" id="tar_city" multiple>

    </select>
</div>

JS：

<script>
    $(document).ready(function(){
        //第一个按钮
        $('.btn1').on('click',function(){
              $('#sel_city option').appendTo('#tar_city');
        });
       //第二个按钮
        $('.btn2').on('click',function(){
            $('#tar_city option').appendTo('#sel_city');
        });
        //第三个按钮
        $('.btn3').on('click',function(){
            $('#tar_city option:selected').appendTo('#sel_city');
        });
        //第四个按钮
        $('.btn4').on('click',function(){
            $('#sel_city option:selected').appendTo('#tar_city');
        });
    });
</script>