用jquery的ajax方法实现三级联动

<script>
(function(){
var p = $('#province');//得到省份的select对象
var c = $('#city');//得到城市的select对象
var t = $('#town');//得到地区的select对象

$.ajax({//使用$.ajax()访问服务器
type:"get",//get类型访问
url:"ajax\/gys",//地址
async:true,
success:function(data){//若访问成功，服务器返回data数据
for(var i=0;i<data.length;i++){//遍历返回的数据
var html = $('<option value="' + i +'">'+ data[i] +'</option>');
//创建省份option
p.append(html);//将省份的option添加到p的选项中
}
},
dataType:'json'//将返回的数据转为json类型
});

p.on('change',function(){//当省份选项发生改变时
c.html('');//先清空城市和区原有的选项
t.html('');
createCity(c,$(this).val());//调用创建城市方法改变市option
if(c.on('change focus')){//如果城市对象选项发生改变或者获取焦点时
c.on('change focus',function(){
createArea(t,$(this).val(),p.val());
//调用创建地区方法来更新相应的地区
});
}
});
})();

function createCity(city,p_val){//创建城市option city为城市的select对象，p_val为省份的value
//根据省份的value来显示不同的城市
$.ajax({
type:"get",
url:"ajax\/gys?p="+p_val,
async:true,
success:function(data){
for(var i=0;i<data.length;i++){
var html = $('<option value='+ i+'>'+ data[i]+'</option>');
city.append(html);
}
},
dataType:'json'
});
}

function createArea(areas,c_val,p_val){//创建区、县option，areas为区的select对象
//c_val为城市的value,p_val为省份的value，根据省份和城市的value来切换显示不同的地区
$.ajax({//使用$.ajax()方法提交给服务器
type:"get",
url:"ajax\/gys?p="+p_val+"&c="+c_val,//拼接地址
async:true,
success:function(data){//访问服务器成功，则得到返回的data数据
for(var i=0;i<data.length;i++){//遍历data数据
var html = $('<option value='+ i +'>'+ data[i] +'</option>');
//使用html变量创建option i为对应的option的value data[i]为地区
areas.append(html);//将节点添加到区的选项
}
},
dataType:'json'//将得到的data数据转为json类型
});
}
</script>