Love Mike G

IE, Select Options, and Double Clicks

I seem to pick on Internet Explorer quite often. Really, I don’t start my day wanting to find something new to bitch about. It just seems to happen that way. Well, in my perpetual battle with the way IE handles forms, I made a new discovery: double-click events are not triggered on OPTION elements.

Even thought the specification says that OPTION elements get a dblclick event, Internet Explorer ignores it. Although frustrating at first, IE has caused me to discover a wonderfully convenient solution that seems to work well amongst most browsers with less code.

Although OPTION elements don’t get the dblclick event, the SELECT element does. Once it’s triggered, simply get the selected option’s value.

<select name="test" size="10" id="boogers" ondblclick="alert(this.options[this.selectedIndex].value)">
  <option value="01">One</option>
  <option value="02">Two</option>
  <option value="03">Three</option>
</select>

Or, if you prefer to not be so obtrusive…

<select name="test" size="10" id="boogers">
  <option value="01">One</option>
  <option value="02">Two</option>
  <option value="03">Three</option>
</select>

<script type="text/javascript" src="prototype.js"></script>
<script type="text/javascript">
$('boogers').observe('dblclick', function(event) {
  alert(Event.element(event).value);
});
</script>

This entry was posted on Thursday, July 19th, 2007 at 10:51 am and is filed under Code, JavaScript. Both comments and pings are currently closed.

Comments are closed. Sorry.