HTML
<div class="form-group">
<label class="col-sm-3 control-label no-padding-right" for="address">联系地址: </label>
<div class="col-sm-9">
<input type="hidden" id="address">
<select id="province" onchange="changeProvince(this.value)">
<option value="">省/直辖市</option>
</select>
<select id="crity" onchange="changeCity(this.value)">
<option value="">市/区</option>
</select>
<select id="area" onchange="changeArea(this.value)">
<option value="">区/县</option>
</select>
<select id="street">
<option value="">街道/乡/村</option>
</select>
</div>
</div>
JS
var province;
$(function () {
$.get("../../assets/json/geoinfo-all.json", function (data) {
province = data;
for (var i = 0; i < data.length; i++) {
$("#province").append('<option value=' + i + '>' + data[i].name + '</option>')
}
});
});
var districts;
function changeProvince(value) {
if (value !== "") {
$('#crity option').not(":first").remove();
districts = province[value].districts;
for (var v = 0; v < districts.length; v++) {
$("#crity").append('<option value=' + v + '>' + districts[v].name + '</option>')
}
}
};
var area;
function changeCity(value) {
if (value !== "") {
$('#area option').not(":first").remove();
area = districts[value].districts;
for (var v = 0; v < area.length; v++) {
$("#area").append('<option value=' + v + '>' + area[v].name + '</option>')
}
}
}
var street;
function changeArea(value) {
if (value !== "") {
$('#street option').not(":first").remove();
street = area[value].districts;
for (var v = 0; v < street.length; v++) {
$("#street").append('<option value=' + v + '>' + street[v].name + '</option>')
}
}
}
部分JSON
[{
"citycode": "010",
"adcode": "110000",
"name": "北京市",
"center": "116.407394,39.904211",
"level": "province",
"districts": [{
"citycode": "010",
"adcode": "110100",
"name": "北京城区",
"center": "116.407394,39.904211",
"level": "city",
"districts": [{
"citycode": "010",
"adcode": "110101",
"name": "东城区",
"center": "116.41649,39.928341",
"level": "district",
"districts": [{
"citycode": "010",
"adcode": "110101",
"name": "崇文门外街道",
"center": "116.427389,39.894647",
"level": "street",
"districts": []
},