<!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. STM32的例程GPIO的汇编指令初探

    任务一:寻找main函数的汇编指令集 任务二:寻找main函数中的SystemClock_Config函数的汇编指令集 寻找main函数的汇编指令集 运行例程中GPIO工程时,总会加载startup_ ...

  2. 关于datetime和int 是否可为null的问题

    一个对象的属性中有一个datetime类型的属性,在赋值时未给予赋值,此时系统会分配给它一个最小的时间,不会是null值,与int类型相似,datetime也不会有null类型, 先来看一段代码: n ...

  3. jq插件第二款来袭 图片滚动

    这第二款也是非常实用的插件,也是与图片相关,关于图片的需求太多了,这个是图片滚动哦,不过不是无缝滚动,是左像右滚动,到头的话再往回滚动,利用scrollLeft实现的,支持自动滚动和每次滚动的个数默认 ...

  4. VB.NET生成Excel，已存在提示框点否时报错

    如题 Exception from HRESULT: 0x800A03EC 最终没有好的解决方案,只好屏蔽掉 Try obook.SaveAs(excelSaveName) Catch ex As S ...

  5. 阅读express的感悟

    在github上看了半天的源码,也是云里雾里,勉强也算看完了,通过查看很多人的讲解也方便了我的理解,今天记录下来,也算是做个笔记. 进入express的源码文件里我们可以看到8个文件:middlewa ...

  6. Delphi Windows API判断文件共享锁定状态（OpenFile和CreateFile两种方法）

    一.概述 锁是操作系统为实现数据共享而提供的一种安全机制,它使得不同的应用程序,不同的计算机之间可以安全有效地共享和交换数据.要保证安全有效地操作共享数据,必须在相应的操作前判断锁的类型,然后才能确定 ...

  7. 【关于360极速浏览器的xx极速模式自动切换到兼容模式】

    原理上是可以的. 1  360基于Chromium 开源浏览器内核,它本身就是一个壳子.. 2  7.0之后的极速浏览器,不支持 它官方的那个声明标记.<meta name=”renderer” ...

  8. AIX安装SSH

    AIX 7.1   进入 https://www14.software.ibm.com/webapp/iwm/web/preLogin.do?source=aixbp 先下载需要的openssl,op ...

  9. 经典CSS颜色混合模式

    转自:http://www.webhek.com/css-blend-mode/ 注意:只有使用最新版的谷歌浏览器.火狐浏览器,才能正确的显示本文中的演示. Photoshop里最没有用处的一种功能— ...

  10. Linux脚本练习

    例1:写一个脚本,利用循环和continue关键字,计算100以内能被3整除的数之和 运行结果: 例2: 写一个脚本,利用循环和continue关键字,计算100以内能被3整除的数之和 运行结果: 例 ...