本文將介紹如何使用Ajax和下拉框來實現顯示不同圖片的功能。通過動態加載圖片，用戶可以在下拉框中選擇不同的選項，并即時看到對應的圖片。這種交互方式可以用于各種網站，例如產品展示頁面、相冊瀏覽等。

首先，我們需要在HTML中創建一個下拉框和一個用于顯示圖片的容器：

<select id="imageSelector">
<option value="" selected disabled hidden>請選擇圖片</option>
<option value="image1.jpg">圖片1</option>
<option value="image2.jpg">圖片2</option>
<option value="image3.jpg">圖片3</option>
</select>
<div id="imageContainer"></div>

接下來，我們需要編寫JavaScript代碼來處理下拉框的選擇事件，并使用Ajax來動態加載圖片：

var imageSelector = document.getElementById("imageSelector");
var imageContainer = document.getElementById("imageContainer");
imageSelector.addEventListener("change", function() {
var selectedImage = imageSelector.value;
if (selectedImage) {
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
var imageUrl = URL.createObjectURL(xhr.response);
imageContainer.innerHTML = "<img src='" + imageUrl + "' alt='圖片'>";
}
};
xhr.open("GET", selectedImage, true);
xhr.responseType = "blob";
xhr.send();
} else {
imageContainer.innerHTML = "";
}
});

以上代碼首先通過getElementById方法獲取了下拉框和圖片容器的引用，并添加了一個change事件監聽器。當下拉框的選項發生變化時，事件處理函數會被觸發。

在事件處理函數中，我們首先獲取了用戶選擇的圖片路徑，并判斷是否已選擇圖片。如果沒有選擇圖片，則清空圖片容器的內容；反之，我們創建了一個新的XMLHttpRequest對象，并配置了其onreadystatechange事件處理函數。

在onreadystatechange事件處理函數中，我們首先檢查請求的狀態是否為4（代表請求已完成），并檢查狀態碼是否為200（代表請求成功）。如果請求成功，我們將響應的Blob對象轉換為URL，然后通過innerHTML將此URL設置為圖片容器中顯示的圖片。

接下來，我們需要編寫CSS樣式來美化頁面，并確保圖片可以正確顯示：

select {
padding: 10px;
font-size: 16px;
}
#imageContainer img {
max-width: 100%;
max-height: 400px;
}

在上述CSS樣式中，我們對下拉框和圖片容器進行了一些基本的樣式設置。我們為下拉框應用了一些內邊距和字體大小，以提高交互體驗。而對于圖片容器中的圖片，我們設置了最大寬度和最大高度，以確保它們在不同屏幕尺寸下都能適應。

最后，我們可以在下拉框中添加一些選項，然后測試整個功能：

<option value="image1.jpg">圖片1</option>
<option value="image2.jpg">圖片2</option>
<option value="image3.jpg">圖片3</option>

在下拉框中選擇不同的圖片選項，圖片容器中會即時顯示對應的圖片。這個功能可以用于各種場景，例如當用戶需要查看不同產品的圖片時，他們只需在下拉框中選擇相應的產品名稱即可快速切換圖片。

通過上述方法，我們可以使用Ajax和下拉框來實現圖片的動態顯示。這種方式可以提供更好的用戶體驗和交互性，同時可以減少頁面加載時間。您可以根據實際需求進行修改和擴展，以滿足不同的業務需求。