javascript - 浏览器不会在选项标签上设置 selected 属性

Question

我有一个可以使用 native javascript 动态增加的表单。

function plus(){
  var myHTML = '\
  <select id="one"  name="one"> \
    <option value="001">one</option> \
    <option value="002">two</option> \
    <option value="003">three</option> \
    <option value="004">four</option> \
  </select>';

  document.getElementById("divpos").innerHTML = document.getElementById("divpos").innerHTML + myHTML;
}

这工作正常，但如果我选择其中一个选项并添加另一个选择，之前添加的选择将重置为其默认值(或第一个可用选项)。给出的例子:

• 添加选择#1
• 选择#1:两个
• 添加选择#2
• 选择#1:一个
• 选择#2:一个

应该是这样的

• 添加选择#1
• 选择#1:两个
• 添加选择#2
• 选择#1:两个
• 选择#2:一个

我认为只是左键单击某些东西并没有明确设置“selected”属性。如果设置了此项，则不会发生对先前值的重置。我使用 Google Chrome 开发者选项尝试了这个，设置了任何选择的值，它按预期工作。有什么办法可以解决这个问题吗？

---

注意:我确实更改了每个新选择的 ID 和名称。我有一个打印我的 HTML 页面的 Perl-CGI 脚本。所以这里没有重复的 ID 或名称。

Answer 1

问题是因为这一行 document.getElementById("divpos").innerHTML =更改 innerHTML，以便更新 DOM 并丢失当前选定的值。

你可以做的是

function plus(){
    var myHTML = '<select id="anid"  name="aname"> \
        <option value="001">one</option> \
        <option value="002">two</option> \
        <option value="003">three</option> \
        <option value="004">four</option> \
      </select>';

    var div = document.createElement('div');
    div.innerHTML = myHTML;
    document.getElementById("divpos").appendChild(div.firstChild);
}