省市区-三级联动（json数据模拟）

html.

<div>

<!--<span>请选择您所在区/县</span>-->

<select id="province" name="province" value="省">

<option value="">请选择您所在省</option>

</select>

<!--<span>请选择您所在区/县</span>-->

<select id="area" name="area">

<option value="">请选择您所在区/县</option>

</select>

<!--<span>请选择您所在城市</span>-->

<select id="city" name="city">

<option value="">请选择您所在城市</option>

</select>

</div>

js.

$(function(){

//json数据

var loadInfo = "city.json";

var _data = "";

$.getJSON(loadInfo, function(data){

_data = data;

return _data;

});

//省============================================

$.getJSON(loadInfo, function(data){

_data = data;

var count = "";

$.each(_data,function(i,val){

$.each(val,function(i,v){

var code = v.code.substr(2,5); //判断是否属于省

if(code == "0000"){

var obj = "";

obj += "<option data-id="+v.code+">"+v.name+"</option>";

count += obj;

}

})

});

$("#province").append(count);

});

//省============================================

//市

$("#province").on("change",function(){

var areacount = "";

var code = $(this).find("option:selected").attr("data-id");

$.each(_data,function(i,val){

$.each(val,function(i,v){

if(v.code == code){

$.each(v.city,function(i,v){

var obj = "";

obj += "<option data-id="+v.code+">"+v.name+"</option>";

areacount += obj;

})

}else{

$("#city").empty();

}

})

});

$("#area").empty();

$("#area").append(areacount);

});

//城市

$("#area").on("change",function(){

var citycount = "";

var code = $(this).find("option:selected").attr("data-id");

$.each(_data,function(i,val){

$.each(val,function(i,v){

$.each(v.city,function(i,v){

if(v.code == code){

$.each(v.area,function(i,v){

var obj = "";

obj += "<option data-id="+v.code+">"+v.name+"</option>";

citycount += obj;

})

}

})

})

});

$("#city").empty();

$("#city").append(citycount);

})

})