<html>
<head>
<META charset="utf8">
<script type="text/javascript" src="http://code.jquery.com/jquery.js"></script>
<script>
(function($) {
    $.fn.areaSelInit = function() {
        return $(this).html("<option>请选择</option>");
    };
    $.area = function(data,sel) {
        /** 初始化 **/
        $("#province").areaSelInit();
        $("#city").areaSelInit();
        $("#county").areaSelInit();
        /** 选中特定值 **/
        $.each(data, function(p,x) {
            var s1 = '';
            if(undefined!=sel){
                s1 = (p==sel[0]) ? 'selected' : '';
            }
            $("#province").append("<option "+s1+">" + p + "</option>"); // 省

            if(undefined!=sel){
                if ($("#province option:selected").text()==p) {
                    $.each(x,function(c,cx){
                        var s2 = '';
                        s2 = (c==sel[1]) ? 'selected' : '';
                        $("#city").append("<option "+s2+">" + c + "</option>"); // 市

                        if ($("#city option:selected").text()==c) {
                            $.each(cx.split(","),function(){
                                var s3 = '';
                                s3 = (this==sel[2]) ? 'selected' : '';
                                $("#county").append("<option "+s3+">" + this + "</option>"); // 区
                            });
                        }

                    });
                }
            }
        });
        /** onchange事件 **/
        $("#province").change(function() {
            $("#city").areaSelInit();
            $("#county").areaSelInit();
            $.each(data, function(p, x) {
                if ($("#province option:selected").text() == p) {
                    $.each(x, function(c, cx) {
                        $("#city").append("<option>" + c + "</option>"); // 市
                    });

                    $("#city").bind("change", function() {
                        $("#county").areaSelInit();
                        $.each(x, function(c, cx) {
                            if ($("#city option:selected").text() == c) {
                                $.each(cx.split(","), function() {
                                    $("#county").append("<option>" + this + "</option>"); // 区
                                });
                            }
                        });
                    });
                }
            });
        });
    };
})(jQuery);
$(function() {
    var data = {北京: {北京: "东城,西城,海淀,宣武,丰台"
            },
            江苏: {南京: "江宁,六合,下关,浦口",
                无锡: "北塘,滨湖,江阴,宜兴"
            },
            广东: {广州: "越秀区,东山区,海珠区,荔湾区,天河区,白云区,黄埔区,芳村区,番禺区,花都区,增城市,从化市",
                揭阳: "榕城区,揭东县,揭西县,普宁市"
            }
        };
    var sel = ['广东','揭阳']; // 或: var sel = [];
    $.area(data,sel);
});
</script>
</head>
<body>
    <select id="province"><option>请选择</option></select>
    <select id="city"><option>请选择</option></select>
    <select id="county"><option>请选择</option></select>
</body>
</html>

　　

;

js城市联动选择器的更多相关文章

  1. 全国三级城市联动 js版

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  2. JS中简单的二级城市联动

    代码奉上: <!DOCTYPE html><html><head>    <meta charset="UTF-8">    < ...

  3. [js开源组件开发]js手机联动选择日期 开源git

    js手机联动选择日期 这里在前面的<js手机联动选择地区>的基础上,改造数据源之后形成的一个日期的选择器,当然你可以使用之前的PC上模式的<日期控件>,它同时也支持手机端,ht ...

  4. [JS]以下是JS省市联动菜单代码

    以下是JS省市联动菜单代码: 代码一: <html> <head> <title></title> <script language=" ...

  5. JQUERY省、市、县城市联动选择

    JQUERY 插件开发——CITYLINKAGE(省.市.县城市联动选择) 第一部分:背景   开发源于需求,本次城市联动选择插件算是我写插件的一个特例吧,不是我目前工作需要些的,算是兴趣驱使吧.之前 ...

  6. JS省市区联动效果

    省市区联动下拉效果在WEB中应用非常广泛,尤其在电商网站最为常见.一般使用Ajax实现无刷新下拉联动.利用jQuery,通过读取JSON数据,实现无刷新动态下拉省市二(三)级联动效果. 首先我们可以看 ...

  7. js 多级联动（省、市、区）

      js 多级联动(省.市.区) CreateTime--2018年4月9日17:10:38 Author:Marydon 方式一: 数据从数据库获取,ajax实现局部刷新 方式二: 数据从json文 ...

  8. Jquery 插件开发——citylinkage（省、市、县城市联动选择）

    第一部分:背景  开发源于需求,本次城市联动选择插件算是我写插件的一个特例吧,不是我目前工作需要些的,算是兴趣驱使吧.之前呢,一直想写这个插件,然后错过了一个写这个插件的机会(这个得回顾到很久以前了. ...

  9. 省市区js三级联动（原创）

    看了一些网上的js三级联动,但感觉不是缺这,就是少那,决定亲自操刀写了一个,现记录如下,以备后用! <!DOCTYPE html> <html> <head> &l ...

随机推荐

  1. awk使用记录

    awk是一个强大的文本分析工具,相对于grep的查找,sed的编辑,awk在其对数据分析并生成报告时,显得尤为强大.简单来说awk就是把文件逐行的读入,以空格为默认分隔符将每行切片,切开的部分再进行各 ...

  2. RabbitMQ三----'任务分发 '

    当有Consumer需要大量的运算时,RabbitMQ Server需要一定的分发机制来balance每个Consumer的load.试想一下,对于web application来说,在一个很多的HT ...

  3. Cache和Buffer的区别(转载)

    1. Cache:缓存区,是高速缓存,是位于CPU和主内存之间的容量较小但速度很快的存储器,因为CPU的速度远远高于主内存的速度,CPU从内存中读取数据需等待很长的时间,而  Cache保存着CPU刚 ...

  4. 【经典数据结构】B树与B+树（转）

    本文转载自:http://www.cnblogs.com/yangecnu/p/Introduce-B-Tree-and-B-Plus-Tree.html 维基百科对B树的定义为“在计算机科学中,B树 ...

  5. KeePass 不能复制账号密码

    最近一段时间发现 KeePass 不能复制账号密码了, 程序也没有任何错误提示, 没有办法定位原因, 这个就难办了. 网上搜索后发现这个帖子 Can't paste in gnome-terminal ...

  6. Windows web服务器搭建---阿里云

      前提步骤: 1)申请域名---- 阿里云.花生壳.万维网等等. 2)云主机购买-----阿里云.腾讯云.京东云等等. 3)网站备案,此步骤最长. 4)建立网站 5)部署网站 下面主要介绍如何部署网 ...

  7. 【Mysql】 你会用 information_schema吗？

    示例 select * from information_schema.views 其中的views可以替换成以下的字段,以下未列举的一般的数据库操作工具,在information_schema后输入 ...

  8. JavaScript匿名函数与托付

    <1> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <!-- C#匿名函数--& ...

  9. 调用获取学生信息的接口，保存到excel里面的小程序

    # 2.http: // doc.nnzhp.cn / index.php?s = / 6 & page_id = 14# 调用获取学生信息的接口,保存到excel里面 import requ ...

  10. Java 常见的异常错误分析大集合

      算术异常类:ArithmeticExecption 空指针异常类:NullPointerException 类型强制转换异常:ClassCastException 数组负下标异常:Negative ...