<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>二级联动</title>

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

    <style>

    </style>

    <script type="text/javascript">

        $(function(){

            var provinces = ['北京', '上海', '浙江'];

            var provinceCityMap = {

                '北京': ['东城','西城','崇文','宣武','朝阳'],

                '上海': ['黄浦','卢湾','徐汇','长宁','静安'],

                '浙江': ['杭州','嘉兴','宁波','温州','湖州']

            };

            var $province = $('#province');

            for(var i = 0; i < provinces.length; i++){

                $('<option>' + provinces[i] + '</option>')

                        .appendTo($province)

                        .val(provinces[i]);

            }

            $province.on('change', function() {

                //当前选中的省的值

                var citySelected = $province.find('option:selected').val();

                //console.log(citySelected);

                changeCitys(citySelected);

            });

            function changeCitys(province) {

                $('.city').empty();

                var citys = provinceCityMap[province];

                for(var i = 0;i < citys.length;i++){

                    $('<option>' + citys[i] + '</option>')

                            .appendTo('.city')

                            .val(citys[i]);

                }

            }

            changeCitys($province.find('option:selected').val());

            $('.show').on('click', function() {

                console.log($province.find('option:selected').val());

            });

        });

    </script>

</head>

<body>

<select id="province"></select>

<select class="city"></select>

<button class="show">显示</button>

</body>

</html>

　　

jQuery二级联动的更多相关文章

  1. （实用篇）jQuery二级联动代码

    jquery二级联动城市代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "htt ...

  2. jQuery 二级联动

    jQuery 二级联动 ----请选择省份---- 北京 上海 江苏 ----请选择城市---- 东城 西城 崇文 宣武 朝阳  黄浦 卢湾 徐汇 长宁 静安 南京  镇江 苏州 南通 扬州 & ...

  3. jquery实现select二级联动

    jquery实现一个简单的select二级联动菜单,代码如下 <!DOCTYPE html> <html> <head> <meta charset=&quo ...

  4. jQuery 1.3.2 简单实现select二级联动

    jQuery 1.3.2 简单实现select二级联动  复制代码代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transiti ...

  5. 通同select便签实现简单的二级联动

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  6. (实用篇)jQuery+PHP+MySQL实现二级联动下拉菜单

    二级联动下拉菜单选择应用在在很多地方,比如说省市下拉联动,商品大小类下拉选择联动.本文将通过实例讲解使用jQuery+PHP+MySQL来实现大小分类二级下拉联动效果. 先看下效果 大类:  前端技术 ...

  7. Asp.Net下，基于Jquery的Ajax二级联动

    最近做一个项目,要求实现二级联动效果.背景为:通过学院的选择,联动出专业选项.起初想直接用微软的控件实现Ajax效果,但是DropDownList控件会自动触发PostBack,在后台根本就不好控制, ...

  8. jQuery实现的3个基础案例（仿QQ列表分组，二级联动下拉框，模拟员工信息管理系统）

    1.仿QQ列表分组 <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type&quo ...

  9. jQuery应用实例3：全选、二级联动

    全选: 这里是用JS实现的:http://www.cnblogs.com/xuyiqing/p/8378221.html 如果使用jQuery则会方便很多: <!DOCTYPE html> ...

随机推荐

  1. TCP/IP详解之：SNMP

    基于TCP/IP的网络管理包含3个组成部分: 一个管理信息库MIB:MIB包含所有代理进程的所有可被查询和修改的参数 关于MIB的一套公用的结构和表示符号,即SMI(管理信息结构) 管理进程和代理进程 ...

  2. Windows上Python3.5安装Scrapy(lxml)

    常用网址: Python 3.5: https://www.python.org/downloads/ Wheel文件:http://www.lfd.uci.edu/~gohlke/pythonlib ...

  3. Canvas基础学习（一）——实现简单时钟显示

    HTML5最受欢迎的功能就是<canvas>元素.这个元素负责在页面中设定一个区域,然后就可以通过JavaScript动态地在这个区域中绘制图形.关于<canvas>元素的一些 ...

  4. Linux下，命令 wget 的使用

    wget是一个从网络上自动下载文件的自由工具.它支持HTTP,HTTPS和FTP协议,可以使用HTTP代理.  所谓的自动下载是指,wget可以在用户退出系统的之后在后台执行.这意味这你可以登录系统, ...

  5. wamp启动mysql的命令

    输入net start mysql提示服务名无效是因为在wamp集成安装中,mysql的服务名字是叫wampmysqld,可以用net start查看服务列表.所以命令启动mysql就应该输入net ...

  6. 计算机模拟（hd1283）

    最简单的计算机 Problem Description 一个名叫是PigHeadThree的研究组织设计了一台实验用的计算机,命名为PpMm.PpMm只能执行简单的六种命令A,B,C,D,E,F:只有 ...

  7. MYSQL create database 和 create table 做了一些什么！

    create database Studio; 这样就可以创建一个数据库了.他包涵一些什么呢? 可以看到它创建了一个文件夹,下面我们进去看一下它里面有一些什么东西. 还是先建一张表再进去吧,运行一下这 ...

  8. 使用TypeScript开发一个在线记事本，支持离线存储

    先贴上源码传送门: https://github.com/flowforever/yaryin.note 记事本网址: http://yindoc.com , 井号后面写你喜欢的文件名即可. 最近在研 ...

  9. 读<<代码整洁之道>>的感想

    花去了近一周的时间浏览一下这本书.总体感觉这本书写得不错. 我发现自己以前写的代码时多么的糟糕.有很多改进之处... 同时我也发现写出优秀的代码不易.优秀的代码不仅仅易读,并且易修改,易维护,程序易维 ...

  10. C# 多线程 异步加载 窗体

    C# 多线程 异步加载 窗体 分类: C#2014-05-28 16:57 1286人阅读 评论(0) 收藏 举报 异步加载 我们在使用 windowform 编程的时候,我们或许可能会越到,各种在窗 ...