<div class="selCity">
<select class="prov" name="province">
<option value="">请选择</option>
</select>
<select class="city" name="city">
<option value="">请选择</option>
</select>
<select class="area" name="area">
<option value="">请选择</option>
</select>
</div>
var Province = "js/province.json",
City = "js/city.json",
Area = "js/area.json";
function getInfo(url,callback){
$.ajax({
url:url,
type:"get",
success:function(res){
callback(res);
}
})
}
getInfo(Province,function callback(res){
console.log(res);
$(res).each(function(index,cur){
var opt = $("<option value="+cur.id+">"+cur.name+"</option>");
$(".prov").append(opt);
})
})
$(".prov").change(function(){
var sel = $(".prov").find("option:selected").text();
var selVal = $(".prov").find("option:selected").val();
getInfo(City,function callback(res){
console.log(res);
$(res).each(function(index,cur){
if(cur.preId == selVal){
$(".city option").remove();
$(cur.list).each(function(index,cur){
var opt = $("<option value="+cur.id+">"+cur.name+"</option>");
$(".city").append(opt);
})
}else if(selVal == ""){
$(".city option").remove();
var opt = $("<option value=''>请选择</option>");
$(".city").append(opt);
}
})
$(".city").change();
})
})
$(".city").change(function(){
var selValP = $(".prov").find("option:selected").val();
var selValC = $(".city").find("option:selected").val();
console.log(selValC);
if(selValC == ""){
$(".area option").remove();
var opt = $("<option value=''>请选择</option>");
$(".area").append(opt);
}
getInfo(Area,function callback(res){
console.log(res);
$(res).each(function(index,cur){
if(cur.preId == selValP){
console.log(cur);
$(cur.list).each(function(index,curr){
if(curr.preId == selValC){
$(".area option").remove();
$(curr.list1).each(function(index,cur){
var opt = $("<option value="+cur.id+">"+cur.name+"</option>");
$(".area").append(opt);
})
}
})
}
})
})
})