城市选择案例

<!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. js中的innerHTML，innerText，value的区别

    首先先说一下 我自己认为的 innerHTML,innerText,value的区别 innerHTML 是在控件中加html代码 就是设置一个元素里面的HTML eg: <html> & ...

  2. 写入时复制（CopyOnWrite）

    一.CopyOnWrite 思想 写入时复制(CopyOnWrite,简称COW)思想是计算机程序设计领域中的一种通用优化策略.其核心思想是,如果有多个调用者(Callers)同时访问相同的资源(如内 ...

  3. HA: Chanakya Vulnhub Walkthrough

    靶机链接: https://www.vulnhub.com/entry/ha-chanakya,395/ 网络主机探测: 主机端口扫描: nmap -p- -sC -sV 10.10.202.136 ...

  4. cesium结合geoserver实现地图空间查询(附源码下载)

    前言 cesium 官网的api文档介绍地址cesium官网api,里面详细的介绍 cesium 各个类的介绍,还有就是在线例子:cesium 官网在线例子,这个也是学习 cesium 的好素材. 内 ...

  5. iOS 中事件的响应链和传递链

    iOS事件链有两条:事件的响应链:Hit-Testing事件的传递链 响应链:由离用户最近的view向系统传递.initial view –> super view –> ….. –> ...

  6. MySQL中使用group by 是总是出现1055的错误

    因为在MySQL中使用group by 是总是出现1055的错误,这就导致了必须去查看是什么原因了,查询了相关的资料,现在将笔记记录下来,以便后面可以参考使用: sql_mode:简而言之就是:它定义 ...

  7. python简明教程

    Python简明教程 MachinePlay关注 0.7072018.09.26 01:49:43字数 2,805阅读 9,287 Python一小时快速入门 1.Python简介   pylogo. ...

  8. oracle 数据库 Cause: java.sql.SQLSyntaxErrorException: ORA-00904: "BODY": 标识符无效

    1.全大写或者加引号 SELECT TEST_NAME FROM T_TEST  或者 SELECT “test_name” from "t_user"

  9. java读取中文文本文件乱码问题

    今天遇到的问题是这样:用java读取一个中文文本文件,但读取到的却是乱码,之前一直没有问题,查清楚后,原来是因为今天是用的windows的记事本来编辑的文件,因编码方式是的不同而导致了乱码,解决方法就 ...

  10. centos7 字体库。vim乱码

    centos7 字体库.vim乱码 windows上传文件到centos,需要先使用dos2unix命令进行格式转换 先查看/usr/share下有没有这两个文件 没有的话yum -y install ...