HTML与JS实现多图上传时保留已有尺寸选择值不重置的解决方案咨询

select选中值被重置的核心原因是innerHTML +=的执行逻辑：该操作会先将images-section容器内已有的所有DOM元素序列化为HTML字符串，和新的字符串拼接后，再整体重新解析为DOM替换容器原有内容，之前用户操作产生的状态（比如select选中值、事件绑定等）都会随着旧DOM销毁直接丢失，和文件上传逻辑本身无关。

直接改用insertAdjacentHTML方法追加新内容，该方法不会触发现有DOM的重建，原有select的选中值会自动保留，不需要额外写数组存储状态的逻辑，改造成本极低。

同时修正原代码两个小问题：

1. select元素重复定义了id属性，同一个元素不能设置两个id
2. 循环内的i是当前批次上传的文件索引，多批次上传会出现id重复，新增全局计数变量区分不同批次的图片

修改后的完整JS代码如下：

// 全局计数器，避免多批次上传生成重复的select id
let imageIndex = 0;

function loadFiles(event) {
    let imagesSection = document.getElementById("images-section");
    for (let i = 0; i < event.files.length; i++) {
        let imageSrc = URL.createObjectURL(event.files[i]);
        // beforeend表示在容器内部的末尾追加内容，不影响已有DOM
        imagesSection.insertAdjacentHTML('beforeend', 
        `<div class="image-frame">
            <img src="${imageSrc}">
            <select id="image-options-${imageIndex}" name="size" required>
                <option value="" selected disabled hidden>select size</option>
                <option value="" disabled>horizontal</option>
                <option value="w10h15">10cm x 15cm</option>
                <option value="w13h15">13cm x 18cm</option>
                <option value="w20h15">20cm x 25cm</option>
                <option value="w20h15">20cm x 30cm</option>
                <option value="" disabled>vertical</option>
                <option value="w15h10">15cm x 10cm</option>
                <option value="w18h13">18cm x 13cm</option>
                <option value="w25h20">25cm x 20cm</option>
                <option value="w30h20">30cm x 20cm</option>
            </select>
        </div>`);
        imageIndex++;
    }
};

你提到的用数组存储已选值的思路也可以实现，但属于冗余实现，改DOM追加方式的方案性能和维护成本都更低，更推荐使用。

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