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

Question

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

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

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

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

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

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

Answer 1

这是 innerHTML 的 Mozilla 开发者网络页面的片段。

此处有更多详细信息：https://developer.mozilla.org/en-US/docs/Web/API/Element/innerHTML

This property was initially implemented by web browsers, then specified by the WHATWG and W3C in HTML5. Old implementations may not all implement it exactly the same way. For example, when text is entered into a text input, Internet Explorer changes the value attribute of the input's innerHTML property but Gecko browsers do not.

Answer 2

内容属性显示初始状态。

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

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

<input value="foo" />

它的默认文本是 "foo"。让我们将其更改为 "bar"。那么，

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。

Answer 3

这对我有用：

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

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

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

why doesn't innerHTML reflect changes made in an html form?

html

javascript

cross-browser