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

$(function() {
// 省份下拉列表發生改變時觸發事件
$('#province').change(function() {
// 獲取選中的省份
var province_id = $(this).val();
// 發送ajax請求獲取對應的城市列表
$.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('獲取城市列表失??！');
}
});
});
// 城市下拉列表發生改變時觸發事件
$('#city').change(function() {
// 獲取選中的城市
var city_id = $(this).val();
// 發送ajax請求獲取對應的縣區列表
$.ajax({
type: 'get',
url: '/get_district_list_by_city_id',
data: {'city_id': city_id},
success: function(data) {
// 將縣區列表填充到縣區下拉列表中
$('#district').empty().append('請選擇縣區');
$.each(data, function(index, district) {
$('#district').append('' + district.name + '');
});
},
error: function() {
alert('獲取縣區列表失?。?);
}
});
});
});

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