在前端開發中，經常會遇到需求動態添加下拉選擇框的情況。而Ajax是一種重要的技術，可以實現無刷新地向服務器端請求數據。通過Ajax的append方法可以很方便地實現動態添加下拉選擇框的功能。在本文中，我們將通過舉例說明如何使用Ajax的append方法來實現這一功能。

假設我們有一個表單，需要動態地添加多個下拉選擇框，用于選擇不同的城市。初始時，我們只有一個下拉選擇框，用戶可以選擇其中的城市。當用戶需要選擇更多城市時，點擊“添加城市”按鈕，新的下拉選擇框就會動態地被添加到表單中。

<form id="cityForm">
<div id="cityContainer">
<select name="city">
<option value="Beijing">北京</option>
</select>
</div>
<button id="addCityBtn" type="button">添加城市</button>
</form>

當用戶點擊“添加城市”按鈕時，我們需要使用Ajax的append方法向服務器端請求新的下拉選擇框的內容，然后將其添加到表單中。下面是使用jQuery實現這一功能的例子：

$('#addCityBtn').click(function() {
$.ajax({
url: '/api/cities',
method: 'GET',
success: function(data) {
var select = '<select name="city">';
for (var i = 0; i< data.length; i++) {
select += '<option value="' + data[i] + '">' + data[i] + '</option>';
}
select += '</select>';
$('#cityContainer').append(select);
}
});
});

在這個例子中，我們使用了jQuery的Ajax方法來向服務器端發送GET請求，并通過success回調函數處理返回的數據。在success回調函數中，我們創建了一個select變量，并通過循環遍歷數據，生成了新的下拉選擇框的HTML代碼，然后使用Ajax的append方法將其添加到表單中的cityContainer元素中。

假設服務器端的API會返回一個城市列表，格式如下：

[
"上海",
"廣州",
"深圳",
"杭州"
]

當我們點擊“添加城市”按鈕時，會向服務器端發送GET請求，并將返回的城市列表通過append方法添加到表單中。舉個例子，如果返回的城市列表為["上海", "廣州", "深圳", "杭州"]，那么點擊按鈕后，表單中會新增一個下拉選擇框，其中包含這四個城市作為選項。

通過這個例子，我們可以看到，使用Ajax的append方法可以很方便地實現動態添加下拉選擇框的功能。無論是動態添加城市選擇，還是其他類似的需求，都可以通過這個方法實現。