闲来没事，写点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. 使用CURL发彩信，短信和进行多线程

    短彩信发送 01 $xml_data = '<?xml version="1.0" encoding="UTF-8" standalone="y ...

  2. 【转】Linux下tar.xz结尾的文件的解压方法--不错

    原文网址:http://blog.csdn.net/silvervi/article/details/6325698 今天尝试编译内核,下载到了一份tar.xz结尾的压缩文件,网上解决方法比较少,不过 ...

  3. Majority Element II 解答

    Question Given an integer array of size n, find all elements that appear more than ⌊ n/3 ⌋ times. Th ...

  4. 第05讲- DDMS中logcat的使用

    第05讲 DDMS中logcat的使用 1.DDMS DDMS 的全称是Dalvik Debug Monitor Service,是 Android 开发环境中的Dalvik虚拟机调试监控服务.DDM ...

  5. 【转】Android中自动连接到指定SSID的Wi-Fi

    最近在做一个项目,其中涉及到一块“自动连接已存在的wifi热点”的功能,在网上查阅了大量资料,五花八门,但其中一些说的很简单,即不能实现傻瓜式的拿来就用,有些说的很详细,但其中不乏些许错误造成功能无法 ...

  6. SpringMVC学习系列- 表单验证

    本篇我们来学习Spring MVC表单标签的使用,借助于Spring MVC提供的表单标签可以让我们在视图上展示WebModel中的数据更加轻松. 一.首先我们先做一个简单了例子来对Spring MV ...

  7. Handsontable通用方法

    1.clear():清空数据 2.createCol(index,amount,createAutomatically):添加列        index:列索引,amount:添加的列总数,crea ...

  8. [转]CodeIgniter与Zend Acl结合实现轻量级权限控制

    Tag :CodeIgniter  Zend Acl 权限控制 1. Zend_Acl简介 Zend_Acl 为权限管理提供轻量并灵活的访问控制列表 (ACL,access control list) ...

  9. HDU 4122 Alice's mooncake shop （单调队列/线段树）

    传送门:http://acm.hdu.edu.cn/showproblem.php?pid=4122 题意:好难读懂,读懂了也好难描述,亲们就自己凑合看看题意把 题解:开始计算每个日期到2000/1/ ...

  10. The account is locked

    SQL> select * from v$version where rownum=1; BANNER --------------------------------------------- ...