为什么 innerHTML 不反映在 html 表单中所做的更改？答案

【问题标题】：why doesn't innerHTML reflect changes made in an html form?为什么 innerHTML 不反映在 html 表单中所做的更改？
【发布时间】：2015-05-30 18:17:29
【问题描述】：

这是我的 html 文件的一部分：

<form id="foo">
   <select>
      <option value="1" selected>1</option>
      <option value="2">2</option>
   </select>
</form>

现在，当我使用以下 javascript 代码时，它会为我提供表单的确切内容：

alert(getElementById("foo").innerHTML);

但是，在我更改表单选项后，上面的代码仍然返回表单内容的先前版本。

例如，假设我已将选项从“1”切换到“2”。在这种情况下，我希望上面的 javascript 代码返回表单的内容并选择选项“2”；但无论我如何更改表单，它总是返回表单内容的原始版本。

【问题讨论】：

可能重复：stackoverflow.com/questions/5696453/…

标签： javascript html cross-browser

【解决方案1】：

内容属性显示初始状态。

IDL 属性（又名属性）显示当前状态。

例如，假设我们有这样的文本输入：

<input value="foo" />

它的默认文本是“foo”。让我们把它改成“酒吧”。那么，

input.getAttribute('value') 将是初始值："foo"。
input.defaultValue 将等同于上述："foo"。
input.value 将是当前值："bar。

var inp = document.querySelector('input');
(inp.oninput = function() {
  document.getElementById('attr').textContent = inp.getAttribute('value');
  document.getElementById('defVal').textContent = inp.defaultValue;
  document.getElementById('val').textContent = inp.value;
})();

<input value="foo" />
<p>Attribute: <span id="attr"></span></p>
<p>Default value: <span id="defVal"></span></p>
<p>Value: <span id="val"></span></p>

在您的情况下，它会发生类似的事情。 innerHTML 只显示 HTML 标记，其中包括内容属性（反映初始状态）但不包括 IDL 属性（当前状态）。

如果您想要当前状态，请使用 IDL 属性而不是使用 innerHTML 来读取它。

【讨论】：

您所说的似乎只有在具有“值”属性的元素（即文本框、按钮等）的情况下才是正确的。但问题是
在您的情况下，selected 与 value 相同，但它更复杂，因为有多个 options。解决方法取决于您要达到的目标。但是您可以尝试迭代选项和 ussetAttribute 或 removeAttribute，具体取决于它们是否被选中。 Demo

【解决方案2】：

这是来自innerHTML 的 Mozilla 开发者网络页面的 sn-p。

这个属性最初是由网络浏览器实现的，后来由 WHATWG 和 W3C 在 HTML5 中指定。旧的实现可能不会都以完全相同的方式实现它。例如，当文本是输入文本输入，Internet Explorer 会更改值输入的 innerHTML 属性的属性，但 Gecko 浏览器没有。

【讨论】：

正在查看相同的文档和行:)

【解决方案3】：

这对我有用：

$('myselect').find('option').prop('selected', false).eq(1).prop('selected', true);

换句话说，它在所有选项中按照你想要的方式设置'selected'属性。

【讨论】：

OP 可能没有 jQuery