表单Select选项重复显示问题求助：修改后无法更新已有条目

你的问题核心在于原代码使用了累加的字符串变量data存储展示内容，每次修改Select选项时都会往这个字符串里追加新内容，而不会替换原有相同字段的条目，导致重复显示。下面提供两种可行的解决方案：

方案一：用对象维护选择状态（推荐） #

通过一个对象存储每个Select字段的当前选择值，每次修改后重新渲染整个展示区域，确保内容始终是最新的：

var form = document.getElementById("form");
var displayArea = document.getElementById("displayArea");
// 存储每个select的选择结果，key为select的name，value为选中值
var selectedData = {};

form.addEventListener("change", function(event) {
    const select = event.target;
    if (select.tagName === "SELECT" && select.value) {
        // 更新对应字段的选择值
        selectedData[select.name] = select.value;
        // 重新渲染展示区域
        renderSelectedContent();
    }
});

function renderSelectedContent() {
    // 没有选择内容时清空展示区
    if (Object.keys(selectedData).length === 0) {
        displayArea.innerHTML = "";
        return;
    }
    
    // 构建展示HTML
    let html = "<h2>Auswahl</h2><br>";
    for (const name in selectedData) {
        html += `${name}: ${selectedData[name]}<br>`;
    }
    displayArea.innerHTML = html;
}

这种方法逻辑清晰，状态维护简单，后续如果需要添加清空选择、重置等功能，扩展起来也很方便。

方案二：直接操作DOM更新条目 #

如果不想维护额外的状态对象，可以直接在展示区域中查找对应字段的已有条目，存在则更新内容，不存在则添加新条目：

var form = document.getElementById("form");
var displayArea = document.getElementById("displayArea");

form.addEventListener("change", function(event) {
    const select = event.target;
    if (select.tagName === "SELECT" && select.value) {
        // 确保标题存在
        if (!displayArea.querySelector("h2")) {
            displayArea.innerHTML = "<h2>Auswahl</h2><br>";
        }
        
        // 查找当前字段的已有展示条目
        const existingItem = Array.from(displayArea.children).find(el => {
            return el.textContent.startsWith(`${select.name}:`);
        });
        
        if (existingItem) {
            // 更新已有条目内容
            existingItem.textContent = `${select.name}: ${select.value}`;
        } else {
            // 创建并添加新条目
            const newItem = document.createElement("div");
            newItem.textContent = `${select.name}: ${select.value}`;
            displayArea.appendChild(newItem);
        }
    }
});

这种方法直接操作DOM元素，不需要额外的状态存储，但当Select字段数量较多时，DOM查找的性能会略低于方案一。

内容的提问来源于stack exchange，提问作者KSPR