在網頁中，我們經常會遇到一種需求：根據用戶選擇的選項，在下拉列表中動態顯示對應的圖片。這種效果可以通過Ajax技術來實現。本文將介紹如何使用Ajax下拉列表聯動圖片，并通過舉例來加深理解。

首先，我們需要在HTML中創建兩個下拉列表，一個用于選擇類別，另一個用于選擇具體的產品。當用戶選擇類別時，我們將通過Ajax技術從服務器獲取該類別對應的產品列表，并將這些產品顯示在第二個下拉列表中。同時，我們可以通過JavaScript來實現當用戶選擇不同的產品時，動態地顯示對應的圖片。

接下來，讓我們來看一下具體的代碼實現：

<select id="category" onchange="getProducts()">
<option value="1">電視</option>
<option value="2">手機</option>
<option value="3">筆記本電腦</option>
</select>
<select id="product" onchange="showImage()">
</select>
<img id="image" src="">

在上面的代碼中，第一個下拉列表的id為"category"，用于選擇產品的類別。第二個下拉列表的id為"product"，用于選擇具體的產品。最后，我們使用一個標簽來顯示選中產品的圖片，id為"image"。

下面我們來編寫JavaScript函數來實現Ajax下拉列表聯動圖片的效果：

function getProducts() {
var categoryId = document.getElementById("category").value;
// 創建XMLHttpRequest對象
var xhr;
if (window.XMLHttpRequest) {
xhr = new XMLHttpRequest();
} else {
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
// 設置回調函數
xhr.onreadystatechange = function() {
if (xhr.readyState == 4 && xhr.status == 200) {
var products = JSON.parse(xhr.responseText);
var productSelect = document.getElementById("product");
productSelect.innerHTML = "";
for (var i = 0; i< products.length; i++) {
var option = document.createElement("option");
option.value = products[i].id;
option.text = products[i].name;
productSelect.appendChild(option);
}
}
}
// 發送請求
xhr.open("GET", "get_products.php?category=" + categoryId, true);
xhr.send();
}
function showImage() {
var productId = document.getElementById("product").value;
document.getElementById("image").src = "images/" + productId + ".jpg";
}

在上面的代碼中，我們首先獲取用戶選擇的類別id。然后，我們創建一個XMLHttpRequest對象，并根據瀏覽器類型來選擇合適的對象。接著，我們設置回調函數，當服務器響應成功時，我們將從服務器獲取到的產品列表添加到第二個下拉列表中。

最后，我們編寫showImage函數來動態顯示選中產品的圖片。我們首先獲取用戶選擇的產品id，然后將該id拼接到圖片的路徑中，最后設置標簽的src屬性為拼接后的路徑。

通過以上的代碼，我們可以實現一個基本的Ajax下拉列表聯動圖片的效果。當用戶選擇不同的類別時，第二個下拉列表中將顯示該類別對應的產品。當用戶選擇不同的產品時，圖片將會隨之切換。

以電子產品為例，當用戶選擇"手機"類別時，第二個下拉列表中將顯示"iPhone"、"小米"等產品。當用戶選擇"iPhone"時，顯示的圖片即為"images/1.jpg"。當用戶選擇"小米"時，顯示的圖片即為"images/2.jpg"。通過這種方式，我們能夠靈活地根據用戶的選擇來動態地顯示不同的圖片。

總的來說，通過Ajax技術實現下拉列表聯動圖片是一種非常實用的效果。無論是網上購物還是電子產品展示網站，都可以運用這種效果來提升用戶體驗。