title: Where is the select option current value stored?
body: <p>A <code>&lt;select&gt;</code> element looks like this:</p>
  
  <pre><code>&lt;select id="ok"&gt;
      &lt;option value="one"&gt;First&lt;/option&gt;
      &lt;option value="two" selected&gt;Second&lt;/option&gt;
  &lt;/select&gt;
  </code></pre>
  
  <p>Initially, the <code>Second</code> text value is shown, because the <code>selected</code> attribute is present.</p>
  
  <p>If I manually change it (using mouse click), it shows the new chosen value in UI, but the <code>&lt;select&gt;</code> remains the same in HTML:</p>
  
  <pre><code>&lt;select id="ok"&gt;
      &lt;option value="one"&gt;First&lt;/option&gt;
      &lt;option value="two" selected&gt;Second&lt;/option&gt;
  &lt;/select&gt;
  </code></pre>
  
  <p>I can get the current select value:</p>
  
  <pre><code>document.getElementById('ok').value
  </code></pre>
  
  <p>or the current selected index:</p>
  
  <pre><code>document.getElementById('ok').selectedIndex
  </code></pre>
  
  <p>via JavaScript (or jQuery), but I don't know where these values come from.</p>
  
  <p>Are they stored in DOM or somewhere else?<br>
  How does JavaScript know which is the current value in UI?</p>