jQuery-UI是一個非常流行的JavaScript庫，它提供了許多有用的界面組件和效果。其中一個組件就是地級聯(lián)動，它是一個非常實用的功能，可以讓我們在省、市、縣三級下拉列表之間進(jìn)行聯(lián)動。下面我們來了解一下如何使用jQuery-UI地級聯(lián)動。

$(function() {
// 省份下拉列表發(fā)生改變時觸發(fā)事件
$('#province').change(function() {
// 獲取選中的省份
var province_id = $(this).val();
// 發(fā)送ajax請求獲取對應(yīng)的城市列表
$.ajax({
type: 'get',
url: '/get_city_list_by_province_id',
data: {'province_id': province_id},
success: function(data) {
// 將城市列表填充到城市下拉列表中
$('#city').empty().append('請選擇城市');
$.each(data, function(index, city) {
$('#city').append('' + city.name + '');
});
},
error: function() {
alert('獲取城市列表失敗！');
}
});
});
// 城市下拉列表發(fā)生改變時觸發(fā)事件
$('#city').change(function() {
// 獲取選中的城市
var city_id = $(this).val();
// 發(fā)送ajax請求獲取對應(yīng)的縣區(qū)列表
$.ajax({
type: 'get',
url: '/get_district_list_by_city_id',
data: {'city_id': city_id},
success: function(data) {
// 將縣區(qū)列表填充到縣區(qū)下拉列表中
$('#district').empty().append('請選擇縣區(qū)');
$.each(data, function(index, district) {
$('#district').append('' + district.name + '');
});
},
error: function() {
alert('獲取縣區(qū)列表失敗！');
}
});
});
});

以上代碼中，我們使用了$函數(shù)來選取頁面中的省、市、縣三個下拉列表，然后給省份下拉列表綁定change事件，當(dāng)省份發(fā)生改變時觸發(fā)該事件，執(zhí)行一段ajax請求來獲取對應(yīng)城市的數(shù)據(jù)，然后將城市數(shù)據(jù)填充到城市下拉列表中。同理，當(dāng)城市下拉列表發(fā)生改變時，我們也會執(zhí)行一段ajax請求來獲取對應(yīng)縣區(qū)的數(shù)據(jù)，然后將縣區(qū)數(shù)據(jù)填充到縣區(qū)下拉列表中。