Let's start with my final implementation.
First, you can Here
The JSON file is very long to download, so I store it as a JSON file under the project.
There are two ways that js can read json files, one through Ajax and the other through Jquery's $.getJSON method. I've chosen the second.
Then, the js code is as follows:
$.getJSON("../js/region.json", "", function(data) { //Initialization 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); }); });
And that's it!
But let's summarize the pits I've traveled through.
-
Since the page is run locally and the local json file is read directly, the read url for the json file is "file://..."At the beginning, Chrome prohibits cross-domain access, so neither Ajax nor $.getJSON can successfully read the json file. jquery has the following error:
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.
So the solution is to run on the server.My solution is to useNode.jsA server listening port has been set up for normal access.
2. Start without thinking about cleanup: My previous thought was to use conditional statements to make judgments and generate options for drop-down boxes dynamically. I needed to manually write html that needs to be dynamically increased, but finding it in the middle of the way was too much work!It is more convenient to use json directly.
- Logically unclear, provincial changes can affect cities and districts at the same time.