闲来没事，写点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. 安装 adobe flash player

    安装方法:     1. 下载Adobe Flash Player:        http://fpdownload.macromedia.com/get/flashplayer/pdc/11.2. ...

  2. Power on & RESET 之前?

    這是個有趣的問題 ? 當應用系統 或 ic元件模組於初始之前存在的現像為何 是個得住意的問題 ! 因為得考量 是否會對週邊或被控制端造成危害 這也是長常常會是不穩定設計 的原因!得有實務經驗及想像力才 ...

  3. 字符串转换为float<1>

    zjtest7-frontend:/usr/local/logstash-2.3.4/config# cat g01.conf input {stdin{}} filter { grok { matc ...

  4. 【转】vsftp 遇到错误 500 OOPS: vsftpd: refusing to run with writable root inside chroot()--不错

    原文网址:http://linux.it.net.cn/e/server/ftp/2015/0227/13554.html 当我们限定了用户不能跳出其主目录之后,使用该用户登录FTP时往往会遇到这个错 ...

  5. CDT+Eclipse代码自动提示

    1.查看GCC的版本:$gcc -v————————————————————————gcc version 4.4.6 20110731 (Red Hat 4.4.6-3) (GCC)———————— ...

  6. YUM配置

    一.yum环境的本地源搭建(基于VSFTP): 1)安装vsftp;    @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@         [root ...

  7. PhpForm表单验证

    <!DOCTYPE HTML> <html> <meta http-equiv="Content-Type" content="text/h ...

  8. php用apc实现的临界区 解决并发，资源互斥同步访问

    在面对线程或进程的互斥同步的控制问题时,常用的解决办法是:临界区,互斥锁,信号量 临界区保证在某一时刻只有一个线程能够访问到所需资源的方法. 任何时候,只能至多有一个线程处于临界区中.如果多个线程要求 ...

  9. pyqt动态创建一系列组件并绑定信号和槽(网友提供学习)

    # -*- coding: utf-8 -*- # python:2.x __author__ = 'Administrator' #如上图要求:创建指定多个复选框,一种是通过QT设计器Designe ...

  10. python学习之路-8 面向对象之进阶

    上篇内容回顾和补充 面向对象三大特性 封装 继承 多态 在python中没有多态的概念 变量的类型允许为多种数据类型称之为多态 # c#/java中的多态 # 伪代码 def func(int arg ...