闲来没事，写点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. [OpenJudge] 百练2754 八皇后

    八皇后 Description 会下国际象棋的人都很清楚:皇后可以在横.竖.斜线上不限步数地吃掉其他棋子.如何将8个皇后放在棋盘上(有8 * 8个方格),使它们谁也不能被吃掉!这就是著名的八皇后问题. ...

  2. MathJax测试

    \begin{array}{cc} a & b \\ c & d \end{array} \begin{equation} \int_0^\infty \frac{x^3}{e^x-1 ...

  3. php curl 中的gzip压缩性能测试

    前因: 请求接口次数很多,每日两亿多次,主要是有些接口返回数据量很大高达110KB(为了减少请求次数,将多个接口合并成一个导致的).后端接口的nginx已经开启gzip,所以做个测试,看看是否在请求时 ...

  4. UML--核心元素之参与者Actor

    参与者(actor):在系统之外与系统交互的某人或某事物.例如,管理员,用户等等. 参与者位于边界之外,边界之内的都不叫参与者.用一个词来形容更准确,主角.也就是只有主动启动了这个业务的人,才是参与者 ...

  5. 【转】【Android】HAL分析

    原文网址:http://www.cnblogs.com/lcw/p/3335505.html HAL概述 以下是基于android4.0.3,对应其他低版本的代码,可能有所差异,但基本大同小异. An ...

  6. 【转】一个从32位机器移植到64位机器时的c问题

    原文网址:http://www.jiancool.com/article/96402954887/ 最近工作中遇到了一个讨厌的问题,在32位机器上运行的好好的,但是在64位机器上,出现了诡异的 Seg ...

  7. 【HDU1875】畅通工程再续（MST基础题）

    更改成实形数即可.第一次敲完直接交,CE了一次.晕. #include <iostream> #include <cstring> #include <cstdio> ...

  8. java与.net比较学习系列(7) 属性

    文章摘自:http://www.cnblogs.com/mcgrady/p/3411405.html 说起属性,实际上java中没有属性这个概念,只有字段和方法,但是可以通过私有字段和声明get,se ...

  9. android学习--TabHost选项卡组件

    TabHost是一种非常有用的组件,TabHost能够非常方便地在窗体上放置多个标签页,每一个标签页获得了一个与外部容器同样大小的组件摆放区域.在手机系统的应用类似"未接电话".& ...

  10. [Immutable.js] Differences between the Immutable.js Map() and List()

    The Immutable.js Map() is analogous to a Javascript Object or Hash since it is comprised of key-valu ...