AJAX是一種用于在網頁上異步加載數據的技術，可以實現頁面之間的動態交互。本文將介紹如何使用AJAX來實現兩個下拉框的聯動功能。通過聯動功能，當一個下拉框的選項發生變化時，另一個下拉框的選項也會隨之改變。

假設我們有兩個下拉框，一個是選取省份，另一個是選取城市。當用戶在第一個下拉框中選擇了一個省份后，第二個下拉框會動態顯示該省份對應的城市。這樣的聯動功能可以提供用戶更加便捷的選擇。

// HTML代碼
<div>
<select id="province">
<option value="beijing">北京</option>
<option value="shanghai">上海</option>
<option value="guangdong">廣東</option>
</select>
</div>
<div>
<select id="city">
<option value="beijing" selected>北京</option>
<option value="tianjin">天津</option>
<option value="shanghai">上海</option>
<option value="guangzhou">廣州</option>
<option value="shenzhen">深圳</option>
</select>
</div>

在上面的HTML代碼中，首先我們定義了兩個div元素，分別包含了一個下拉框。第一個下拉框用來選擇省份，給它設置了一個id為"province"。第二個下拉框用來選擇城市，給它設置了一個id為"city"。其中，我們將北京設為第二個下拉框的默認選項。

// JavaScript代碼
var provinceSelect = document.getElementById("province");
var citySelect = document.getElementById("city");
provinceSelect.addEventListener("change", function() {
var selectedProvince = provinceSelect.value;
// 發送AJAX請求，獲取對應的城市數據
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
var cities = JSON.parse(xhr.response);
// 清空城市下拉框
citySelect.innerHTML = "";
// 根據選擇的省份添加對應的城市選項
for (var i = 0; i < cities.length; i++) {
var option = document.createElement("option");
option.value = cities[i];
option.text = cities[i];
citySelect.appendChild(option);
}
}
};
xhr.open("GET", "/api/getCities?province=" + selectedProvince, true);
xhr.send();
});

上面的JavaScript代碼實現了兩個下拉框的聯動功能。首先，我們通過getElementById方法獲取了省份和城市的下拉框。然后，給省份下拉框添加了一個change事件監聽器。當省份選擇發生變化時，會觸發相應的回調函數。

回調函數中，我們獲取了當前選擇的省份，然后發送了一個AJAX請求。這個請求會獲取到該省份對應的城市數據。在獲取到數據后，我們首先清空了城市下拉框的選項。然后，根據獲得的城市數據，動態生成并添加了城市選項到城市下拉框中。

總之，通過使用AJAX實現兩個下拉框的聯動，我們可以提供用戶更加便捷的選擇體驗。當一個下拉框的選項發生變化時，另一個下拉框會自動改變為對應的選項。