zoukankan      html  css  js  c++  java
  • jquery省市区三级联动(数据来源国家统计局官网)内附源码下载

    很久很久没有写博了。

    今天更新了项目的省市区三级联动数据,更新后最新的海南三沙都有,分享给所有需要的小伙伴们。。。

    JQUERY + JSON,无数据库,纯JS代码,无加密,无压缩,可直接使用在任何项目中。

    数据来源于国家统计局官网。

    先上图:

    绑定省市区

    使用方法:

    1. 引用JQUERY    <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/1.11.1/jquery.min.js"></script>

    2. 引用省市区数据 <script type="text/javascript" src="pdata.js"></script>

    3. HTML代码:

     1 <div class="row">
     2     <div class="col-sm-12">
     3         <div class="form-group">
     4             <label class="control-label col-sm-2">所在区域</label>
     5             <div class="col-sm-3">
     6                 <select name="input_province" id="input_province" class="form-control">
     7                 </select>
     8             </div>
     9             <div class="col-sm-3">
    10                 <select name="input_city" id="input_city" class="form-control">
    11                 </select>
    12             </div>
    13             <div class="col-sm-3">
    14                 <select name="input_area" id="input_area" class="form-control">
    15                 </select>
    16             </div>
    17         </div>
    18     </div>
    19 </div>

    4. JS代码:

     1     $(function () {
     2         var html = "<option value=''>== 请选择 ==</option>"; $("#input_city").append(html); $("#input_area").append(html);
     3         $.each(pdata,function(idx,item){
     4             if (parseInt(item.level) == 0) {
     5                    html += "<option value='" + item.names + "' exid='" + item.code + "'>" + item.names + "</option>";
     6                }
     7         });
     8         $("#input_province").append(html);
     9 
    10         $("#input_province").change(function(){
    11             if ($(this).val() == "") return;
    12             $("#input_city option").remove(); $("#input_area option").remove();
    13             var code = $(this).find("option:selected").attr("exid"); code = code.substring(0,2);
    14             var html = "<option value=''>== 请选择 ==</option>"; $("#input_area").append(html);
    15             $.each(pdata,function(idx,item){
    16                 if (parseInt(item.level) == 1 && code == item.code.substring(0,2)) {
    17                        html += "<option value='" + item.names + "' exid='" + item.code + "'>" + item.names + "</option>";
    18                    }
    19             });
    20             $("#input_city").append(html);        
    21         });
    22 
    23         $("#input_city").change(function(){
    24             if ($(this).val() == "") return;
    25             $("#input_area option").remove();
    26             var code = $(this).find("option:selected").attr("exid"); code = code.substring(0,4);
    27             var html = "<option value=''>== 请选择 ==</option>";
    28             $.each(pdata,function(idx,item){
    29                 if (parseInt(item.level) == 2 && code == item.code.substring(0,4)) {
    30                        html += "<option value='" + item.names + "' exid='" + item.code + "'>" + item.names + "</option>";
    31                    }
    32             });
    33             $("#input_area").append(html);        
    34         });
    35         //绑定
    36         $("#input_province").val("广东省");$("#input_province").change();
    37         $("#input_city").val("深圳市");$("#input_city").change();
    38         $("#input_area").val("罗湖区");
    39 
    40     });

    源码下载:点击下载,解压密码 im531

    某某公司又有神马  猝死  的,,,生命是革命的本钱,洗洗睡觉。。。

  • 相关阅读:
    http方法-get和post
    SVG
    canvas
    h5拖放
    jQuery表单事件
    html标签嵌套
    jquery.eq()
    jquery.index()
    Date对象
    json
  • 原文地址:https://www.cnblogs.com/im531/p/jquery-pca.html
Copyright © 2011-2022 走看看