<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>