选择选项当前值存储在哪里？

Question

<select>元素如下所示：

<select id="ok">
    <option value="one">First</option>
    <option value="two" selected>Second</option>
</select>

最初，会显示Second文本值，因为存在selected属性。

如果我手动更改它（使用鼠标单击），它会在UI中显示新选择的值，但<select>在HTML中保持不变：

<select id="ok">
    <option value="one">First</option>
    <option value="two" selected>Second</option>
</select>

我可以获得当前的选择值：

document.getElementById('ok').value

或当前选定的索引：

document.getElementById('ok').selectedIndex

通过JavaScript（或jQuery），但我不知道这些值来自何处。

它们是存储在DOM还是其他地方？ JavaScript如何知道哪个是UI中的当前值？

Answer 1

  

它存储在DOM中吗？

是的，它存储在DOM中。

每当检测到更改事件时，都会更新DOM并将更新后的值存储在value对象中。

使用document.getElementById("ok").value时，您可以访问JavaScript中的最新选择。

您可以在以下位置查看：

Firefox Inspector视图

1. 显示DOM属性

   

2. 按value过滤：

   

Chrome DevTools

1. 选择元素＆gt;属性

   

2. 展开select并使用垂直滚动转到value：