AJAX（Asynchronous JavaScript and XML）是一種在網頁中實現異步通信的技術。它可以在不刷新整個頁面的情況下，通過與服務器交互，動態地更新頁面的內容。其中一種常見的應用是使用 AJAX 動態加載下拉列表，使用戶能夠更加便捷地選擇需要的選項。

以一個在線購物網站為例，用戶在商品分類頁面想要篩選某個品牌的商品。如果采用傳統的方式，用戶需要進入該品牌的頁面，然后再選擇對應的分類。而使用 AJAX 動態加載下拉列表的方法，用戶只需要在一個頁面上進行所有操作，即可快速定位所需商品。

<select id="brand">
<option value="0">請選擇品牌</option>
<option value="1">品牌A</option>
<option value="2">品牌B</option>
<option value="3">品牌C</option>
...
</select>

下拉列表的代碼如上所示。初始狀態下，只有一個默認選項“請選擇品牌”，其值為0。當用戶選擇某個品牌后，將觸發 JavaScript 函數，向服務器發送 AJAX 請求，獲取該品牌的子分類信息，并更新下一個下拉列表。

function loadSubcategories(brandId) {
var url = "getSubcategories.php"; // 服務器端處理 AJAX 請求的 PHP 文件地址
var data = { brandId: brandId }; // 發送給服務器的數據，以對象的形式組織
$.ajax({
type: "POST",
url: url,
data: data,
success: function(response) {
var subcategoryDropdown = $("#subcategory");
subcategoryDropdown.empty(); // 移除當前下拉列表的所有選項
// 添加服務器返回的子分類選項
for (var i = 0; i< response.length; i++) {
subcategoryDropdown.append($("<option>").val(response[i].id).text(response[i].name));
}
},
dataType: "json" // 服務器返回的數據類型，這里假設為 JSON
});
}

以上是一個簡化版的 JavaScript 函數，用于加載子分類信息。在函數中，首先定義了變量 url 和 data，分別表示服務器響應地址和發送給服務器的數據。然后，通過 $.ajax 方法發送異步請求，其中的 type 參數設置為 "POST"，表示以 POST 方法發送請求；url 參數設置為服務器處理 AJAX 請求的 PHP 文件地址；data 參數設置為發送給服務器的數據對象。在請求成功的回調函數中，獲取到服務器返回的子分類信息，通過遍歷該信息，動態地更新下一個下拉列表的選項。最后，dataType 參數設置為 "json"，表示服務器返回的數據類型為 JSON。

在 HTMl 文件中，我們需要使用 onchange 事件，監聽品牌下拉列表的改變。當用戶選擇某個品牌后，將調用 loadSubcategories 函數，傳遞所選品牌的 ID，即 brandId 參數。

<select id="brand" onchange="loadSubcategories(this.value)">
...
</select>
<select id="subcategory">
<option value="0">請選擇子分類</option>
</select>

以上是將品牌下拉列表與 loadSubcategories 函數關聯的關鍵部分。onchange 事件將在用戶選擇品牌后觸發，調用 loadSubcategories 函數并傳遞所選品牌的值。

通過以上的代碼示例，我們可以實現一個動態加載下拉列表的功能。用戶只需要在品牌下拉列表中選擇對應的品牌，即可自動加載該品牌的子分類信息，使用戶能夠方便地進行商品篩選。