城市选择案例

<!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. 搭建Samba服务器、多部门共享，互不干扰，超实用

    案例二 实现不同的用户访问同一个共享目录具有不同的权限,便于管理和维护.基本上能满足一些企业用户的需求. 一. 需求 1. 某公司有3个大部门,分别为:人事行政部(HR).财务部(FM).技术支持部( ...

  2. 十天学会CS之操作系统——进程管理01

    进程管理01 进程的概念 进程是计算机中一个非常重要的概念,在整个计算机发展历史中,操作系统中程序运行机制的演变按顺序大致可以分为: 单道程序:通常是指每一次将一个或者一批程序(一个作业)从磁盘加载进 ...

  3. JMeter接口测试-JDBC测试

    前言 今天我们一起来学习如何利用JMeter连接数据库进行测试吧! 一:添加线程组,再添加JDBC Connection Configuration(右键测试计划-->配置元件-->JDB ...

  4. Shiro知识初探(更新中)

    Shiro 是当下常见的安全框架,主要用于用户验证和授权操作. RBAC 是当下权限系统的设计基础,同时有两种解释:一: Role-Based Access Control,基于角色的访问控制即,你要 ...

  5. eclipse创建java和web工程

    JAVA Eclipse→File→New→Project.. WEB 右键mvn项目→Properties src/main/webapp pom.xml <project xmlns=&qu ...

  6. springcloud vue.js 前后分离 微服务 分布式 activiti工作流 集成代码生成器 shiro权限

    1.代码生成器: [正反双向](单表.主表.明细表.树形表,快速开发利器)freemaker模版技术 ,0个代码不用写,生成完整的一个模块,带页面.建表sql脚本.处理类.service等完整模块2. ...

  7. CSS中的圣杯布局与双飞翼布局

    一,圣杯布局 1,什么是圣杯布局? 所谓圣杯布局就是用于实现一个两侧宽度固定,中间宽度自适应的三栏布局 2,构建圣杯布局的步骤: 2.1,添加一个容器,在这个容器中添加放三个盒子(左.中.右): 2. ...

  8. Android-ServiceManager

    ServiceManager在init进程启动之后启动,用来管理系统中的service,那么首先理解一下在init进程启动之后启动这句话类: 一般开机过程分为三个阶段: OS级别,由bootloade ...

  9. k8s CNI插件简单了解

    Kubernetes网络模型本身对某些特定的网络功能有一定要求,但在实现方面也具有一定的灵活性.业界已经有不少不同的网络方案,来满足特定的环境和要求. CNI(container network in ...

  10. Binder 原理整理

    linux进程间通信方式 1. 管道 管道的实质是一个内核缓冲区,管道的作用正如其名,需要通信的两个进程在管道的两端,进程利用管道传递信息.管道对于管道两端的进程而言,就是一个文件,但是这个文件比较特 ...