1.代码实例

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>04-jQuery-城市选择案例</title>

    <style type="text/css" media="screen">

        select {

            width: 200px;

            background-color: teal;

            height: 200px;

            font-size: 20px;

        }

        .btn-box {

            width: 30px;

            display: inline-block;

            vertical-align: top;

        }

    </style>

    <script src="jquery-1.11.3.js"></script>

    <script>

        // $(function(){

        //     $("#btn-sel-none").on('click',function(){

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

        //     });

        //     $("#btn-sel-all").on('click',function(){

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

        //     });

        //     $("#btn-sel").on('click',function(){

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

        //     });

        //     $("#btn-back").on('click',function(){

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

        //     });

        // });

        $(function(){

            $("#btn-sel-all").on('click',function(){

                //把所有的 城市从左边 移动到右边select中

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

            });

            $("#btn-sel-none").on('click',function(){

                //把所有的 城市从左边 移动到右边select中

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

            });

            $("#btn-sel").on('click',function(){

                //把所有的 城市从左边 移动到右边select中

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

            });

            $("#btn-back").on('click',function(){

                //把所有的 城市从左边 移动到右边select中

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

            });

        });

    </script>

</head>

<body>

     <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="btn-sel-all"> &gt;&gt; </button>

        <button id="btn-sel-none"> &lt;&lt; </button>

        <button id="btn-back"> &lt; </button>

        <button id="btn-sel"> &gt;</button>

    </div>

     <select id="tar-city" name="tar-city" multiple>

     </select>

</body>

</html>

2.实例截图

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

  1. JQuery城市选择

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

  2. jquery省市选择案例

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

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

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

  4. jQuery---城市选择案例

    城市选择案例 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UT ...

  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. Hadoop（七）YARN的资源调度

    一.YARN 概述 YARN 是一个资源调度平台,负责为运算程序提供服务器运算资源,相当于一个分布式的操 作系统平台,而 MapReduce 等运算程序则相当于运行于操作系统之上的应用程序 YARN ...

  2. 【Java】数组的打印输出

    import java.util.Arrays; public class Test { public static void main(String[] args) { int[] a = { 1, ...

  3. (转)一些牛人榜样，多看看他们写的东西（后续整理牛人的blog等）

    http://blog.csdn.net/ajian005/article/details/7697761

  4. 洛谷P4071 [SDOI2016] 排列计数 [组合数学]

    题目传送门 排列计数 题目描述 求有多少种长度为 n 的序列 A,满足以下条件: 1 ~ n 这 n 个数在序列中各出现了一次 若第 i 个数 A[i] 的值为 i,则称 i 是稳定的.序列恰好有 m ...

  5. 堆优化Dijkstra计算最短路+路径计数

    今天考试的时候遇到了一道题需要路径计数,然而蒟蒻从来没有做过,所以在考场上真的一脸懵逼.然后出题人NaVi_Awson说明天考试还会卡SPFA,吓得我赶紧又来学一波堆优化的Dijkstra(之前只会S ...

  6. pycharm的安装教程及大坑

    在根据网上的教程创建新工程后,发现不能调用第三方库,网上大多给的是print('hello world'),己适python解释器用的pycharm默认的也不能发现错误.后来浏览了一篇文章才恍然大悟, ...

  7. GeneXus手机开发基础配置

    最近使用GeneXus15 U3版本做了几个手机端的项目,感觉还不错,开发速度很快,而且想要的功能也都实现了.其中有一些常用的配置和小技巧和大家分享一下. 基础环境要求 如果想开发Android程序, ...

  8. Unity 游戏开发技巧集锦之创建透明的材质

    Unity 游戏开发技巧集锦之创建透明的材质 Unity创建透明的材质 生活中不乏透明或者半透明的事物.例如,擦的十分干净的玻璃,看起来就是透明的:一些塑料卡片,看起来就是半透明的,如图3-23所示. ...

  9. UIViewController的基本概念与生命周期

    UIViewController是iOS顶层视图的载体及控制器,用户与程序界面的交互都是由UIViewController来控制的,UIViewController管理UIView的生命周期及资源的加 ...

  10. Codeforces 388 D. Fox and Perfect Sets

    $ >Codeforces \space 388 D.  Fox and Perfect Sets<$ 题目大意 : 定义一个完美的集合 \(S\) ,当且仅当 \(S\) 非负非空,且 ...