实现省、市、区三级联动的输入框

先来说说我最终的实现方法吧。
首先，可以从这里
下载获得，json文件很长很长，所以我将其作为JSON文件存储在工程下。
js读取json文件的方法有两种，一种通过Ajax，另一种通过Jquery的$.getJSON方法实现，我选取的是第二种。
然后，js代码如下：

 $.getJSON("../js/region.json", "", function(data) {　        //初始化        var text = '';        var province = data[0].name;        var cityList = data[0].city;        var regionList = data[0].city[0].area;        console.log(regionList);        for (var i = 0; i < data.length; i++) {            text += '<option value=' + i + '>' + data[i].name + '</option>'        }        $("#province").html(text);        text = ""        for (var i = 0; i < cityList.length; i++) {            text += '<option value=0-' + i + '>' + cityList[i].name + '</option>'        }        $("#city").html(text);        text = '';        for (var i = 0; i < regionList.length; i++) {            text += '<option value=0-0-' + i + '>' + regionList[i] + '</option>'        }        $("#region").html(text);        $("#province").change(function() {            var index = $(this).val();            var cityJson = data[index].city;            var regionJson = cityJson[0].area            console.log(cityJson);            text = '';            for (var i = 0; i < cityJson.length; i++) {                text += '<option value=' + index + "-" + i + '>' + cityJson[i].name + '</option>'            }            $("#city").html(text);            text = '';            for (var i = 0; i < cityJson.length; i++) {                text += '<option value=' + index + "-0-" + i + '>' + regionJson[i] + '</option>'            }            console.log(text);            $("#region").html(text);        });        $("#city").change(function() {            var tmp = $(this).val();            console.log(tmp);            var provinceIdx = tmp.split('-')[0];            var cityIdx = tmp.split('-')[1];            var regionJson = data[provinceIdx].city[cityIdx].area;            console.log(regionJson);            text = '';            for (var i = 0; i < regionJson.length; i++) {                text += '<option value=' + provinceIdx + "-" + cityIdx + "-" + i + '>' + regionJson[i] + '</option>'            }            console.log(text);            $("#region").html(text);        });    });

然后就实现啦！
不过，接下来总结一下我踩过的坑。

1. 由于是在本地直接运行页面，直接读取本地的json文件，因此json文件的读取url为“file:///…”开头的，而Chrome禁止跨域访问，所以，无论是Ajax还是$.getJSON都无法成功读取json文件,jquery报错如下：

   error:jquery.min.js:1632 XMLHttpRequest cannot load file:///D:/workspace/first/js/region.json. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.

   因此，解决办法就是在服务器上跑。我的解决办法是用node.js搭建了一个服务器监听端口使得能正常访问。

    2. 没思考清除就开始实现：我之前的思路是利用条件语句进行判断后为下拉框动态生成选项，需要手动写需要动态增加的html，但是做到中途发现工作量实在是太大啦！还是直接利用json比较方便。

2. 逻辑不清，省变化会同时影响市和区啊啊啊！