jQuery_城市选择

亦凉 2022-05-21 00:18 309阅读 0赞

想要做一种效果，可以实现选择一个城市点击跳到另一个选择框中  
![这里写图片描述][70]  
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">>></button>
            <button class="btn2"><<</button>
            <button class="btn3"><</button>
            <button class="btn4">></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>

第一个按钮：将左边的全部移到右边

第二个按钮：将右边的全部移动到左边

第三个按钮：将右边选中的城市移动到左边

第四个按钮：将左边选中的城市移动到右边  
效果：  
![这里写图片描述][70 1]

[70]: /images/20220521/9b3ef4fada004e53ae7230e773ce37fa.png
[70 1]: /images/20220521/1657da573e7b4533a2ebf232dab30da9.png

发表评论取消回复

表情：

评论列表（有 0 条评论，309人围观）

还没有评论，来说两句吧...

相关阅读

相关 jQuery选择器、jQuery关系选择器、jQuery伪选择器

一、jQuery选择器 1、父元素(向上遍历单一层级)：parent() 2、祖先元素：parents(selector) 3、子元素(向下遍历单一层级)：child

本是古典何须时尚/ 2023年10月07日 11:58/ 0 赞/ 9 阅读

相关 jquery城市选择控件_jQuery选择插件

jquery城市选择控件 ![jQuery Chosen Plugin][] Without a doubt, my least favorite form element

╰+攻爆jí腚メ/ 2023年02月21日 14:25/ 0 赞/ 115 阅读

相关 jQuery美化下拉多选城市选择代码

[下载地址][Link 1]jQuery下拉单选多选城市选择代码，美化select下拉框美化和下拉城市选择插件。 ![1630270790.png][] dd: [Li

系统管理员/ 2022年09月09日 06:14/ 0 赞/ 130 阅读

相关城市选择页搜索逻辑实现

search页面。首先写一个div放搜索的结果。 ![20180522164858462][] 然后把搜索框和索索列表进行绑定 ![20

末蓝、/ 2022年05月24日 06:42/ 0 赞/ 201 阅读

相关城市选择页列表布局

在码云创建分支city-list git pull把线上分支拉倒本地 git checkout city-list 切换到分支上 npm run dev ![20180

深藏阁楼爱情的钟/ 2022年05月24日 05:06/ 0 赞/ 194 阅读

相关 jQuery_城市选择

想要做一种效果，可以实现选择一个城市点击跳到另一个选择框中 ![这里写图片描述][70] HTML结构： <div class="main">

亦凉/ 2022年05月21日 00:18/ 0 赞/ 310 阅读

相关 jQuery-jQuery选择器

jQuery 选择器 jQuery 选择器允许您对 HTML 元素组或单个元素进行操作。 jQuery 选择器基于元素的 id、类、类型、属性、属性值等"查找"（或选择

雨点打透心脏的1/2处/ 2022年04月17日 07:05/ 0 赞/ 413 阅读

相关 html jquery 三级分类选择框（弹出式）可用于三级城市选择，职位分类选择，行业分类选择等

父级页面 <div class="form-group col-md-6"> <label>职位类型</lab

小灰灰/ 2022年03月20日 12:09/ 0 赞/ 177 阅读

相关 uniapp-城市选择插件

下载地址https://ext.dcloud.net.cn/plugin?id=115 使用： 1.将这5个文件夹放入component目录下 ![在这里插入图片描

电玩女神/ 2022年02月14日 01:54/ 0 赞/ 923 阅读

相关 JQuery获取城市IP

引入JS <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> <s

悠悠/ 2022年01月23日 15:17/ 0 赞/ 275 阅读