jQuery简易三级联动

//省份下拉框加载事件

$(function(){

$.ajax({

url:"../getProvince",

type:"post",

dataType:"json",

success:function(data){

$.each(data,function(k,v){

$('#province').append(""+data.name+"");

});

}

});

});

//省份改变事件

$('#province').bind('change',function(){

//清楚城市下拉列表和区的下拉列表

$('#cityoption:gt(0)').remove();

$('#districtoption:gt(0)').remove();

//省份编号

varprovince_id = $('#province option:selected').val();

$.ajax({

url:"../getCityByProvinceId",

type:"post",

data:{"province_id":province_id},

dataType:"json",

success:function(data){

//获取到城市并追加到城市下拉列表

$.each(data,function(k,v){

$('#city').append(""+data.name+"");

});

}

});

});

//城市改变事件

$('#city').bind('change',function(){

//清楚区的下拉列表

$('#districtoption:gt(0)').remove();

//省份/城市编号

varprovince_id = $('#province option:selected').val();

varcity_id = $('#city option:selected').val();

$.ajax({

url:"../getDistrictByCityIdByAndProvinceId",

type:"post",

data:{

"province_id":province_id,

"city_id":city_id

},

dataType:"json",

success:function(data){

$.each(data,function(k,v){

$('#district').append(""+data.name+"");

});

}

});

});