城市选择案例

<!DOCTYPE html>

<html>

<head lang="en">

  <meta charset="UTF-8">

  <title></title>

  <style>

    select {

      width: 200px;

      background-color: #fff;

      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 () {

        $("#tar-city>option").appendTo("#src-city");

      });

      $("#btn3").click(function () {

        $("#src-city>option:selected").appendTo("#tar-city");

      });

      $("#btn4").click(function () {

        //这里用append

        $("#src-city").append($("#tar-city>option:selected"));

      });

    });

  </script>

</body>

</html>

jQuery---城市选择案例的更多相关文章

  1. jquery城市选择案例

    1.代码实例 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UT ...

  2. JQuery城市选择

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  3. jquery省市选择案例

    1.代码实例 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UT ...

  4. 基于jQuery仿去哪儿城市选择代码

    基于jQuery仿去哪儿城市选择代码.这是一款使用的jQuery城市选择特效代码下载.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div class="lin ...

  5. 基于jquery的城市选择插件

    城市选择插件的难度不是很大,主要是对dom节点的操作.而我写的这个插件相对功能比较简答,没有加入省市联动. 上代码好了,参照代码的注释应该比较好理解. /* *基于jquery的城市选择插件 *aut ...

  6. jquery插件课程1 幻灯片、城市选择、日期时间选择、拖放、方向拖动插件

    jquery插件课程1  幻灯片.城市选择.日期时间选择.拖放.方向拖动插件 一.总结 一句话总结:都是jquery插件,都还比较小,参数(配置参数.数据)一般都是通过json传递. 1.插件配置数据 ...

  7. Web前端JQuery入门实战案例

    前端jquery入门到实战 为什么要学习Jquery?因为生活. 案例: <!DOCTYPE html> <html lang="zh-CN"> <h ...

  8. JQuery的使用案例（二级联动，隔行换色，轮播图，广告插入）

    JQuery的使用案例 (一)利用JQuery完成省市二级联动 第一步:确定事件(change事件),在绑定的函数里面获取用户选择的省份 第二步:创建二维数组来存储省份和城市 第三步:遍历二维数组中的 ...

  9. 移动端城市选择JavaScript插件（基于WG的城市选择插件的修改版本）

    周末的时候趁着一次机会,拿WG(博客)开发的城市选择插件改了一个移动端可以直接用的城市选择插件. 原版插件是基于原声JavaScript写的,在此先感谢作者. 我做的只是依照肯德基注册会员的页面的交互 ...

随机推荐

  1. 用Docker部署自己的JupyterHub

    [话在前头] 用 Docker 部署 JupyterLab 感觉是部署 JupyterLab 最方便的方式了,官方提供了很多可选的镜像,也可以自己从 jupyter/base-notebook 中继续 ...

  2. oracle数据库的启动、关闭、连接

    登陆数据库 方法一: $ sqlplus / as sysdba [oracle@dev /]$ sqlplus / as sysdba SQL*Plus: Release Production on ...

  3. Python常用库 - os库

    os简单介绍 os 模块提供了非常丰富的方法用来处理文件和目录 os关于目录路径的方法 # 获取当前路径 path = os.getcwd() # 获取当前绝对路径 os.path.abspath(p ...

  4. kali中安装中文输入法ibus

    1.控制台输入命令: apt-get install ibus-pinyin 出现选择都选yes 2.安装完毕后输入命令,重启虚拟机: reboot 3.打开  输入法,如图中2处input meth ...

  5. 消息队列MQ(一)

    消息队列 为什么要用消息队列,都有什么优缺点? 要问的是消息队列都有哪些场景,然后项目里具体实现的什么场景,你在这个场景里用的什么消息队列? 期望的回答是,你们公司有个什么业务,这个业务场景有什么技术 ...

  6. DolphinScheduler1.2.1源码分析

    DolphinScheduler在2020年2月24日发布了新版本1.2.1,从版本号就可以看出,这是一个小版本.主要涉及BUG修复.功能增强.新特性三个方面,我们会根据其发布内容,做简要的源码分析. ...

  7. Leetcode字典树-720:词典中最长的单词

    第一次做leetcode的题目,虽然做的是水题,但是菜鸟太菜,刚刚入门,这里记录一些基本的知识点.大佬看见请直接路过. https://leetcode-cn.com/problems/longest ...

  8. [菜b]Isaunoya 的一些学习笔记…[保持咕咕咕]

    fread/fwrite标记永久化 分块 树链剖分 莫比乌斯反演 斜率优化/单调队列 kruskal重构树 回滚莫队 可持久化线段树/trie树 Link-Cut-Tree dsu on tree F ...

  9. 解决jQuery中input 失去焦点之后，不能再获取到焦点

    //编辑过敏史 if(iToolbar == 'editGMS'){ lstype="gms"; var gms=""; if(gmstype=="0 ...

  10. Git 的 .gitignore 配置说明 （C#）

    1.配置语法: 以斜杠“/”开头表示目录: 以星号“*”通配多个字符: 以问号“?”通配单个字符 以方括号“[]”包含单个字符的匹配列表: 以叹号“!”表示不忽略(跟踪)匹配到的文件或目录: 此外,g ...