Undo a HTML select box selection

When a select box requires on the fly validation, HTML and JavaScript doesn’t quite support any way of reverting to a previous choice if the validation fails. You cant trigger an onchange event without first updating the select box to a different value. On the other hand, onclick occurs before the choice is made.

If you set a “selected” tag within an option tag on page load, you can easily revert to a previous value by resetting the form or running reset() on the form. However this kinda makes the selected value pretty static.

The following example will firstly show the javascript code

<script type="text/javascript">

var selectList_cache; // Variable for remember previous choice

function validateList(val)
{
  if(isValid())
  {
     alert("Validated successfully!");
  }
  else
  {
     alert("Failed the validation so reverting");
     document.getElementById("selectList").value=selectList_cache;
  }
}
</script>

Followed by the HTML select box,

<select name="selectList" id="selectList" onclick="selectList_cache=this.value" onchange="validateList(this.value);return false">
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
  <option value="4">4</option>
</select>