<!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. 由于jsp include 很多文件后导致java类大小超过65535 bytes 的解决方法（转载）

    昨天,我遇到了一個讓我很頭疼的問題. 我做了一個共通的jsp,單只測它是ok的,可是,放在別的jsp中include它,就會報錯如標題所示:The code of method _jspService ...

  2. 异常 java.lang.NumberFormatException： For input string：

    今天在写项目时,将String类型转换为Integer类型爆出此异常,记录如下: 代码如下: 1 String a = "2222222222"; //10个2 Integer b ...

  3. (重要) html概念之 input:name与id详解

    实例: 带有两个文本字段和一个提交按钮的 HTML 表单: <form action="form_action.asp" method="get"> ...

  4. stack 集合栈计算机 （摘）

    有一个专门为了集合运算而设计的“集合栈”计算机.该机器有一个初始为空的栈,并且支持以下操作:PUSH:空集“{}”入栈DUP:把当前栈顶元素复制一份后再入栈UNION:出栈两个集合,然后把两者的并集入 ...

  5. Ubuntu安装中文字体

    Ubuntu没有宋体,楷体之类的中文字体,在Libreoffice中打不出中文,-_-! 我们可以从windows中借点字体过来,哈哈. 一.准备字体 从windows7中拷贝出字体文件,拷贝的目录为 ...

  6. linux学习笔记之文件类型，及目录介绍

    引用A:http://www.cnblogs.com/xiaoluo501395377/archive/2013/04/20/3033131.html 引用B:http://www.cnblogs.c ...

  7. 解决rsync 同步auth failed on module问题

    今天在同步备份文件时遇到一个情况,以前正常的备份,在昨天突然同步备份文件失败了.于是开始检查原因..... 报错日志/var/log/rsyncd.log发现错误 // :: [] auth fail ...

  8. Change the ball--hdu2277

    Change the ball Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)T ...

  9. js中一些常用的基本函数

    如何使用jquery刷新当前页面下面介绍全页面刷新方法:有时候可能会用到window.location.reload()刷新当前页面.parent.location.reload()刷新父亲对象(用于 ...

  10. JSONP(转）

    1.一个众所周知的问题,Ajax直接请求普通文件存在跨域无权限访问的问题,甭管你是静态页面.动态网页.web服务.WCF,只要是跨域请求,一律不准: 2.不过我们又发现,Web页面上调用js文件时则不 ...