在Web開發過程中，下拉框是常常使用的UI控件之一。有時候需要將用戶提交的表單進行回顯，這個時候就需要使用JavaScript來實現下拉框的回顯。

下面我們來看看具體的實現方式。

首先，我們需要給下拉框設置一個唯一的ID，例如：

<select id="fruit">
<option value="apple">蘋果</option>
<option value="banana">香蕉</option>
<option value="orange">橙子</option>
</select>

假設用戶選擇了香蕉，我們需要在頁面重新加載時將香蕉設為默認選中。

我們可以使用以下代碼來實現下拉框回顯：

<select id="fruit">
<option value="apple">蘋果</option>
<option value="banana" selected>香蕉</option>
<option value="orange">橙子</option>
</select>

可以看到，在需要回顯的選項中，我們通過添加 selected 屬性將其設為默認選中。

但是，當我們需要回顯多個下拉框時，手動添加 selected 屬性就顯得十分繁瑣，我們可以使用JavaScript來簡化這個過程。

假設我們有兩個下拉框，分別是果汁種類和果汁品牌：

<select id="type">
<option value="orange">橙汁</option>
<option value="apple">蘋果汁</option>
<option value="banana">香蕉汁</option>
</select>
<select id="brand">
<option value="tropicana">Tropicana</option>
<option value="minute_maid">Minute Maid</option>
</select>

我們可以使用以下代碼來實現多個下拉框的回顯：

var type = 'orange'; // 默認果汁種類為橙汁
var brand = 'tropicana'; // 默認果汁品牌為Tropicana
document.getElementById('type').value = type;
document.getElementById('brand').value = brand;

可以看到，我們通過設置下拉框的 value 來達到默認選中的效果。

除此之外，如果我們需要回顯的選項列表非常龐大，手動設置 value 也會變得十分不可行。這個時候，我們可以使用數據綁定來簡化回顯過程。

假設我們需要回顯的選項由后端程序返回的結果：

var fruits = [
{ id: 1, name: '蘋果', value: 'apple' },
{ id: 2, name: '香蕉', value: 'banana' },
{ id: 3, name: '橙子', value: 'orange' }
];
var selectedFruit = 'banana'; // 默認為香蕉
var selectHtml = '';
fruits.forEach(function(fruit) {
var selected = '';
if (selectedFruit == fruit.value) {
selected = 'selected';
}
selectHtml += '<option value="' + fruit.value + '" ' + selected + '>' + fruit.name + '</option>';
});
document.getElementById('fruit').innerHTML = selectHtml;

可以看到，我們通過使用循環來遍歷回顯選項，并動態地構建下拉框的 HTML 內容。在循環中，我們判斷當前選項是否為回顯選項，是則添加 selected 屬性，最終將 HTML 內容插入到果汁下拉框中。

通過這些方法，我們可以輕松實現JavaScript下拉框的回顯。