AJAX Each 多級聯動是一種常用的技術，它可以實現在網頁中多個下拉菜單之間的動態交互。通過使用 AJAX Each，我們可以輕松地實現一個城市-區域-街道的三級聯動效果。這種技術的應用場景非常廣泛，比如在一個在線購物網站中，用戶可以通過選擇不同的城市、區域和街道來篩選他們感興趣的商品。

以一個網上商城為例，假設我們有一個城市的下拉菜單：

<select id="city">
<option value="0">請選擇城市</option>
<option value="1">北京</option>
<option value="2">上海</option>
<option value="3">廣州</option>
</select>

當用戶選擇了城市后，我們需要根據用戶選擇的城市來動態加載相應的區域信息。在這種情況下，我們可以使用 AJAX Each 來實現：

var citySelect = document.getElementById('city');
citySelect.addEventListener('change', function() {
var selectedCity = this.value;
var regionSelect = document.getElementById('region');
regionSelect.innerHTML = ''; // 清空之前的區域信息
// 發送 AJAX 請求，根據用戶選擇的城市獲取相應的區域信息
ajaxGet('get_regions.php?city=' + selectedCity, function(response) {
var regions = JSON.parse(response);
// 使用 AJAX Each 處理區域信息
ajaxEach(regions, function(region) {
var option = document.createElement('option');
option.value = region.id;
option.text = region.name;
regionSelect.appendChild(option);
});
});
});

AJAX Each 函數接受一個數組以及一個回調函數，它會自動遍歷數組中的每一個元素，并將每個元素傳遞給回調函數。在上面的例子中，我們將 AJAX Each 用于處理從服務器返回的每一個區域信息，然后將每一個區域信息轉換為下拉菜單的選項，并將其添加到區域下拉菜單中。

在三級聯動的每一級中，都可以使用 AJAX Each 來處理。假設在選擇了區域之后，我們還需要根據選擇的區域動態加載相應的街道信息。我們可以在前面的例子的基礎上繼續擴展：

var regionSelect = document.getElementById('region');
regionSelect.addEventListener('change', function() {
var selectedRegion = this.value;
var streetSelect = document.getElementById('street');
streetSelect.innerHTML = ''; // 清空之前的街道信息
// 發送 AJAX 請求，根據用戶選擇的區域獲取相應的街道信息
ajaxGet('get_streets.php?region=' + selectedRegion, function(response) {
var streets = JSON.parse(response);
// 使用 AJAX Each 處理街道信息
ajaxEach(streets, function(street) {
var option = document.createElement('option');
option.value = street.id;
option.text = street.name;
streetSelect.appendChild(option);
});
});
});

通過上面的代碼，我們實現了一個完整的城市-區域-街道三級聯動功能。當用戶選擇了城市后，我們根據選擇的城市動態加載區域信息；當用戶選擇了區域后，我們再根據選擇的區域動態加載街道信息。這種技術可以很方便地應用于其他多級聯動的場景中。

總之，使用 AJAX Each 可以輕松地實現多級聯動效果。它簡化了我們處理數組數據的過程，并提供了一種簡潔而高效的方式來處理多個下拉菜單之間的交互。無論是城市-區域-街道的三級聯動，還是其他多級聯動的需求，AJAX Each 都能夠幫助我們快速實現。