JavaScript ajax实现省市区联动例子　

（3）默认，页面加载完成，利用省ajax请求省的数据：

var chosetext = "-请选择-";

$(".CitySelect").append(chosetext);

$(".DistrictSelect").append(chosetext);

 

$.ajax({

type:"get",

url:"{{path('shop_get_province_ajax'
)}}",

dataType:"json",

success:function(data){

$(".CitySelect").empty();

$(".DistrictSelect").empty();

$(".CitySelect").append(chosetext);

$(".DistrictSelect").append(chosetext);

 

var length=data.length;

for(var i=0;i"+data[i].name+""

$(".ProvinceSelect").append(region_option);

}

 

}

});

（4）当省数据选择时，将选择的省的id传送给市的ajax:

 

// 选择-出现市
$('.ProvinceSelect').change(function(){
$(".CitySelect").empty();
$(".DistrictSelect").empty();
$(".CitySelect").append(chosetext);
$(".DistrictSelect").append(chosetext);
 
var id = $(".ProvinceSelect").val();
var url= "{{path('shop_get_city_ajax', { 'id': 'text' })}}";
url = url.replace("text", id);
$.ajax({
type:"get",
url:url,
data:{region:id},
dataType:"json",
success:function(data){
var length=data.length;
 
for(var i=0;i"+data[i].name+"";
$(".CitySelect").append(city_option);
 
}
 
}
})
 
});

（4）当区数据选择时，将选择的区的id传送给区的ajax:

 
 
// 选择-出现区
$('.CitySelect').change(function(){
$(".DistrictSelect").empty();
$(".DistrictSelect").append(chosetext);
 
var id = $(".CitySelect").val();
 
var url = "{{path('shop_get_district_ajax', { 'id': 'text' })}}";
url = url.replace("text", id);
$.ajax({
type:"get",
url:url,
data:{city:id},
dataType:"json",
success:function(data){
var length=data.length;
 
for(var i=0;i"+data[i].name+""
$(".DistrictSelect").append(xian_option);
}
 
}
})
});

• 上一个： jquery实现点击弹出带标题栏的弹出层效果代码

• 下一个： phpcms中pc模板中跳转页面