Ok so I had this hidden select box on an ajaxified html page. On click of a certain "Edit" link, I show the select box and allow the user to select a value. As soon as the user selects a value, the select box should disappear, silently making an ajax call in the background to do the necessary processing.
Sounds simple enough.
<select id="sel1" onchange="callback();">
<option value="1">value1</option>
<option value="2">value2</option>
<option value="3">value3</option>
</select>
<script type="text/javascript" language="javascript">
function callback() {
<br /> // do some ajax processing
...
// hide the sel box
document.getElementById('sel1').style.display = 'none';
}
</script>
This works as expected BUT for one scenario -
When the page is displayed, the first option "value1" is selected by default and if the user selects the currently selected option i.e. "value1", the callback function is never called!
Makes sense too since it's an "
onchange" event handler and technically the user hasn't changed the selection.
So the next approach is, use "onselect" instead of "onchange". Doesn't work at all. Turns out that it is only good for text boxes and text areas. Try using "onclick" instead of "onchange" and that gets called even when you click the control the first time (to show the drop down) before the user even has made a selection which is clearly not what I wanted.
So after a lot of experimenting, the solution I've found is -
<select id="sel1" onchange="callback();">
<option value="1" onclick="callback();">value1</option>
<option value="2">value2</option>
<option value="3">value3</option>
</select>
i.e. put an onclick event in the "
option" which handles the special case that "onselect" doesn't capture.
It's an unsightly hack but it works well!
