Question

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

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

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

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

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

例如，让我们说我已经从＆＃34; 1＆＃34;至＆＃34; 2＆＃34;。在这种情况下，我希望上面的javascript代码返回表单的内容，选项＆＃34; 2＆＃34;选择;但无论我如何更改表单，它总是返回表单内容的原始版本。

Answer 1

内容属性显示初始状态。

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 2

这是来自innerHTML的Mozilla开发人员网络页面的摘录。

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

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

Answer 3

这对我有用：

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

换句话说，它会在所有选项中按照您希望的方式设置'selected'属性。

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

3 个答案: