JavaScript多选框值生成按钮重复创建问题排查

我正在开发一个师生问答网站，教师可创建题目及题目页面，学生可登录答题。在教师界面创建题目时，需要实时预览题目在学生端的展示效果，我用JavaScript获取表单数据实现该功能。目前遇到的问题是：多选框（用于设置题目标签，在学生端以按钮形式展示）每次选择新选项时，不仅会创建新选项的按钮，还会重复创建所有已选选项的按钮。我尝试创建affiche数组记录已生成按钮的选项值，循环时跳过已记录项，但这个方案无效。

我的代码如下：

$("#etiquettes").on('change', function() {
        var affiche= [];
        const myDiv = $("#etiquette-display");
        for (var option of document.getElementById("etiquettes")) {
            if (option.selected && (!affiche.includes(option.value))) {
                let html = '<button class="button is-info" type="button">'+option.value+'</button>';
                myDiv.append(html);
                affiche.push(option.value);
            }
        }
    });

问题原因 #

你写的affiche数组是在change事件的回调函数内部声明的，每次多选框触发变化时，这个数组都会被重新初始化为空数组——相当于每次都从头开始记录，根本没法记住之前已经生成过哪些按钮。所以每次循环都会把所有已选的选项重新生成一遍并追加到容器里，自然就出现了重复按钮的问题。

解决方案 #

方案1：清空容器后重新生成（简单直接） #

每次多选框变化时，先把预览容器里的内容清空，再重新遍历所有已选选项生成按钮。这种方法逻辑简单，不容易出错，适合标签数量不多的场景。

修改后的代码：

$("#etiquettes").on('change', function() {
    const myDiv = $("#etiquette-display");
    // 先清空容器里的旧按钮
    myDiv.empty();
    // 获取所有被选中的选项
    const selectedOptions = this.querySelectorAll('option:checked');
    // 遍历生成按钮并添加到容器
    selectedOptions.forEach(option => {
        const html = `<button class="button is-info" type="button">${option.value}</button>`;
        myDiv.append(html);
    });
});

方案2：增量更新（只处理变化的选项） #

如果不想每次都清空重绘，可以在外层维护一个数组记录当前已显示的标签，只添加新选中的，移除取消选中的选项对应的按钮：

// 在外层保存已显示的标签值，避免每次事件触发都重置
let displayedTags = [];

$("#etiquettes").on('change', function() {
    const myDiv = $("#etiquette-display");
    // 获取当前所有已选选项的值
    const selectedValues = Array.from(this.querySelectorAll('option:checked')).map(opt => opt.value);
    
    // 处理新选中的标签：添加到容器和记录数组
    const newTags = selectedValues.filter(val => !displayedTags.includes(val));
    newTags.forEach(val => {
        const html = `<button class="button is-info" type="button" data-tag="${val}">${val}</button>`;
        myDiv.append(html);
        displayedTags.push(val);
    });
    
    // 处理取消选中的标签：从容器移除并更新记录数组
    const removedTags = displayedTags.filter(val => !selectedValues.includes(val));
    removedTags.forEach(val => {
        myDiv.find(`button[data-tag="${val}"]`).remove();
        displayedTags = displayedTags.filter(tag => tag !== val);
    });
});

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