"Drop-down" selected value not updated in HTML

Question

When I select a new value (3) in a drop down menu, I see that HTML still has the old value (10) as "selected".

<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10" selected="selected">10</option>

EDIT 1: the problem manifests itself when I clone the form. The cloned copy has its selected option reset. Is there a way to clone the selected value too?

Answer 1

The reason you are seeing this is that changing the selected index will not alter the attribute on the html element itself. However, the value actually is changed.

See this demo for an example of what the selected index shows when changed