通过读取json数据完成无刷新加载

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>getJSON获取数据</title>
    <script src="../../bootstrap_test/bootstrap/js/jquery.min.js"></script>
    <style type="text/css">
        *{margin:0;padding:0;}
        .selectList{width:300px;margin:50px auto;}
    </style>
</head>

<body>
<div class="selectList">
    <select class="province">
        <option>请选择</option>
    </select>
    <select class="city">
        <option>请选择</option>
    </select>
    <select class="district">
        <option>请选择</option>
    </select>
</div>
<script>
    $(function(){
        var areaJson;
        var func = {
            "province": function(areaJson) {
                temp_html = "";
                $.each(areaJson,function(i,province){
                    temp_html+="<option value='"+province.p+"'>"+province.p+"</option>";
                });
                $(".province").html(temp_html);
                func.city(areaJson);
            },
            "city": function(areaJson) {
                var n = $(".province").get(0).selectedIndex,
                        temp_html="";
                $.each(areaJson[n].c, function(i, city) {
                    temp_html+="<option value='"+city.ct+"'>"+city.ct+"</option>";
                });
                $(".city").html(temp_html);
                func.district(areaJson);
            },
            "district": function(areaJson) {
                var m = $(".province").get(0).selectedIndex,
                     n = $(".city").get(0).selectedIndex,
                        temp_html="";
                if(typeof(areaJson[m].c[n].d) == "undefined") {
                    $(".district").css("display", "none");
                }
                else
                {
                    $(".district").css("display","inline");
                    $.each(areaJson[m].c[n].d, function (i, district) {
                        temp_html += "<option value='" + district.dt + "'>" + district.dt + "</option>";
                    });
                    $(".district").html(temp_html);
                }
            }
        };
        //获取json数据
        $.getJSON("./area.json",function(data){
            areaJson = data;
            //为省份赋值
            func.province(data);
        });

        $(".province").change(function(){
            func.city(areaJson);
        });
        $(".city").change(function(){
            func.district(areaJson);
        });
    })
</script>
</body>
</html>

　　area.json

[
  {
    "p": "江西省",
    "c": [
      {
        "ct": "南昌市",
        "d": [
          {
            "dt": "西湖区"
          },
          {
            "dt": "东湖区"
          },
          {
            "dt": "高新区"
          }
        ]
      },
      {
        "ct": "赣州市",
        "d": [
          {
            "dt": "瑞金县"
          },
          {
            "dt": "南丰县"
          },
          {
            "dt": "全南县"
          }
        ]
      }
    ]
  },
  {
    "p": "北京",
    "c": [
      {
        "ct": "东城区"
      },
      {
        "ct": "西城区"
      }
    ]
  },
  {
    "p": "河北省",
    "c": [
      {
        "ct": "石家庄",
        "d": [
          {
            "dt": "长安区"
          },
          {
            "dt": "桥东区"
          },
          {
            "dt": "桥西区"
          }
        ]
      },
      {
        "ct": "唐山市",
        "d": [
          {
            "dt": "滦南县"
          },
          {
            "dt": "乐亭县"
          },
          {
            "dt": "迁西县"
          }
        ]
      }
    ]
  }
]