使用 innerHTML 向页面添加新 select 会导致先前添加的 select 元素丢失用户从下拉列表中 select 编辑的任何值

Question

我遇到了一个页面的奇怪问题，该页面使用 Javascript DOM 操作 (innerHTML) 向页面添加了一系列下拉菜单。

我在单击按钮时添加了一个新的下拉菜单，代码与此等效：

  html = `<select class="selector">
            <option value="">No value selected</option>
            <option value="A">A</option>
            <option value="B">B</option>
            <option value="C">C</option>
          </select>`;
  containerDOMElement.innerHTML += html;

当以这种方式将新的下拉列表添加到页面时，我看到任何其他 selects，其中用户创建了 selection，并清除了它们的值。

我已经在这个 jsfiddle 中重现了这个问题。

要查看问题，请在页面加载后从第一个和第三个下拉菜单中手动 select 选项 B。现在按 "add another" 并注意第一个和第三个下拉菜单已丢失 selection。

有谁知道为什么会这样，以及如何让下拉菜单在添加新下拉菜单时保持其价值？

Answer 1

这一行：

containerDOMElement.innerHTML += html;

与此行具有相同的功能：

containerDOMElement.innerHTML = containerDOMElement.innerHTML + html;

换个角度看，您会看到整个 HTML 正在重建，因此丢失了当前选择的选项。

相反，要附加 HTML，我们可以使用 insertAdjacentHTML。在你的情况下：

containerEl.insertAdjacentHTML('beforeend', html);

这是您的 JSFiddle 的工作版本：

let existing_options = [
    "A","B","C"
];

let containerEl = document.getElementById("container");

let count = 0;

function addSelect(preselectOptionB=false) {
    html = `<select class="selector" name=${count}><option value="">No value selected</option>`;
    existing_options.forEach(function (dataValue,index)
    {
        html += `<option value=${dataValue} ${(preselectOptionB && dataValue=="B") ? 'selected="selected"' : ""}>${dataValue}</option>`;
    });
    html += `</select><br/>`;
    
    count++;
    containerEl.insertAdjacentHTML('beforeend', html);
}

function addNewSelectWithNoValue() {
    addSelect(false);
}

let button = document.getElementById("addbutton");
button.addEventListener('click', addNewSelectWithNoValue);

// add four initial ones.
addSelect();
addSelect(true);
addSelect();
addSelect(true);

<div id="container"></div>
<hr/>
<button id="addbutton">Add another</button>

使用 innerHTML 向页面添加新 select 会导致先前添加的 select 元素丢失用户从下拉列表中 select 编辑的任何值

Adding a new select to a page using innerHTML causes previously added select elements to lose any value the user has selected from the dropdowns

html

javascript

select

innerhtml