闲来没事，写点jquery练练手。

<!--json代码部分 新建文件liandong.json-->

var pron_city = {

    '省':['all'],

    '北京':[

        {'市':[]},

        {'海淀区':[]},

        {'东城区':[]},

        {'西城区':[]},

        {'昌平区':[]},

        {'怀柔区':[]},

        {'朝阳区':[]}

        ],

    '山东':[

        {'市':[]},

        {'济南':['区','历城区','历下区','槐荫区','市中区']},

        {'青岛':['区','一区','二区']}

        ],

    '河北':[

        {'市':[]},

        {'石家庄':['区','三区','四区']},

        {'唐山':['区','五区','六区']},

        {'保定':['区','七区','八区']}

        ]

}

<!--html代码部分-->

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8" />

    <title></title>

<style>

</style>

</head>

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

<style>

    body{background-color:#435a9d;}

    ul,li{margin:0;padding:0;}

    .abc{

        width:420px;

        height:480px;

        margin:100px;

    }

    select{

        width:110px;

        margin-left:10px;

    }

</style>

<script src="liandong.json"></script>

<script>

$(document).ready(function(){

    for(var i in pron_city){

        var html_pn = "<option>"+i+"</option>";

        $('.province').append(html_pn);

    }

    var province , city , index;

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

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

        province = $(this).val();

        for(var j in pron_city[province]){

            for(var m in pron_city[province][j])

            {

                var html_cy = "<option>"+m+"</option>";

                $('.city').append(html_cy);

            }

        }

    })

    $('.city').change(function(){

        $('.block').empty();

        city = $(this).val();

        index = $(this)[0].selectedIndex;

        for(var k in pron_city[province][index][city]){

            html_bk = "<option>"+pron_city[province][index][city][k]+"</option>";

            $('.block').append(html_bk);

        }

    })

})

 </script>

 <body>

    <div class="abc">

        <select class="province">

        </select>

        <select class="city">

            <option selected>市</option>

        </select>

        <select class="block">

            <option selected>区</option>

        </select>

    </div>

</body>

</html>

jquery实现二级联动的更多相关文章

  1. jQuery下拉列表二级联动插件

    jQuery下拉列表二级联动插件的视图代码: <!doctype html> <html lang="en"> <head> <meta ...

  2. asp.net mvc jQuery 城市二级联动

    页面效果图: 数据库表结构: 首先在数据库中创建省级.城市的表,我的表如下:我用了一张表放下了省级.城市的数据,用level划分省份和城市,parentId表示该城市所在省份的id 主要文件有:ind ...

  3. Struts2, jquery, select二级联动

    1. 下载jquery.js文件放在webroot下js文件夹里 2. 配置struts.xml: <package name="default" namespace=&qu ...

  4. django + jquery 实现二级联动

    二级联动用ajax还是很好实现的,下面简单给个例子 jquery代码 $("#id_sel").change(function(){ $.get("/browser/ge ...

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

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

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

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

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

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

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

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

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

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

随机推荐

  1. VBoxManage.exe: error: Resize hard disk operation for this format is not implemented yet!

    VirtualBox虚拟磁盘空间不够了,默认10G.想扩大,图形界面下没有找到可操作菜单.Google了一下用 Vbox自带的命令工具VBoxManage即可解决. C:\Program Files\ ...

  2. cf C. Quiz

    http://codeforces.com/contest/337/problem/C 得到的分数为:(2^1+2^2+...+2^X)*k + m-X*k = (2^(X+1)-2)*k + m-X ...

  3. 时刻注意QT与Windows系统的不同（惨痛教训）

    其实就一条:WINAPI使用'\',而QT使用'/'.如果程序立刻崩溃的话,是很难看出端倪的,所以要时刻注意...

  4. 关闭ssh密码登录

    我们经常使用SSH登录管理服务器,在享受便利的同时也会遇到一些安全隐患,最常见的就是SSH密码被暴力破解.如果我们将SSH密码设置的过于复杂,又不容易记,因此限制SSH登录方式,只能使用key登录是一 ...

  5. 【转】repo sync同步Android 源代码下载到99%出错

    原文网址:http://blog.csdn.net/mr_president/article/details/7693707 根据Google官网上的方法在我们实验室搭建了一个本地的Android代码 ...

  6. Struts2源代码解读之Action调用

    对于Struts2源代码的分析已经有些时日了,虽然网上有很多解读代码,不过自己还是写一个放上来,供大家参考一下. 解读过程: 直接在action类中打断点(包括构造函数和待执行方法)进行debug调试 ...

  7. c++ 12

    一.模板与继承 1.从模板类派生模板子类 2.为模板子类提供基类 二.容器和迭代器 以链表为例. 三.STL概览 1.十大容器 1)向量(vector):连续内存,后端压弹,插删低效 2)列表(lis ...

  8. safari浏览器cookie问题

        这个题目可能有点大了,这里主要讨论一种解决safari浏览器阻止第三方cookie问题.       场景       公司存在多个域名(a.com,b.com,co.com)这些域名应该统一 ...

  9. hdu 5335 Walk Out(bfs+寻找路径)

    Problem Description In an n∗m maze, the right-bottom corner or a written on it. An explorer gets los ...

  10. hdu 4405 Aeroplane chess（概率+dp）

    Problem Description Hzz loves aeroplane chess very much. The chess map contains N+ grids labeled to ...