城市选择案例

<!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. cornerstone使用beyond compare比较工具

    prefrences->general->external compare tool->open script foder 新建一个bc.sh文件(名字可以任意,sh后缀即可)保存到 ...

  2. leetcode--js--Two Sum

    问题描述: 给定一个整数数列,找出其中和为特定值的那两个数. 你可以假设每个输入都只会有一种答案,同样的元素不能被重用. 示例: 给定 nums = [2, 7, 11, 15], target = ...

  3. CommunityServer的编译

    1. 简介 Community Server是一个免费的开源协作系统,用于管理文档.项目.客户关系和电子邮件通信,可以在私有服务器上安装和配置.它的组成分为: 1. OnlyOfficeJabber  ...

  4. 微信小程序如何下载超过大小限制（10M）的视频？（苹果用户仔细看，安卓用户快速看）

    众所周知,微信小程序对下载的文件大小有限制,目前是最大支持10M.我们在用去水印小程序保存视频的时候,如果遇到长视频,视频大小可能就超过限制.遇到这种情况,我们如何才能把视频保存到手机相册呢? 首先, ...

  5. 微信小程序入门笔记-审核上线（5）

    1.点击上传 2.填写版本号.备注 3.https://mp.weixin.qq.com/回到微信公众平台,点击版本管理就可以看到开发版本 4.点击提交审核(提交之前填写小程序基本资料,才可提交审核) ...

  6. nginx基础（一）

    一.nginx的安装.启动.停止及文件解读 yum -y install gcc gcc-c++ autoconf pcre-devel make automake yum -y install wg ...

  7. 2020数据字典php-直接复制

    [2020数据字典php-直接复制] <?php /** * 生成mysql数据字典 */ header ( "Content-type: text/html; charset=utf ...

  8. Spring Boot 配置拦截器方式

    其实spring boot拦截器的配置方式和springMVC差不多,只有一些小的改变需要注意下就ok了.下面主要介绍两种常用的拦截器: 一.基于URL实现的拦截器: public class Log ...

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

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

  10. Centos中Redis的下载编译与安装(超详细)

    场景 NoSQL,泛指非关系型的数据库,NoSQL即Not-Only SQL,它可以作为关系型数据库的良好补充.随着互联网web2.0网站的兴起,非关系型的数据库现在成了一个极其热门的新领域,非关系数 ...