hasenj blog

IE6 doesn’t run onclick events in “option” tags

Posted in webdev by hasenj on 05/09/2009

You have an ajax drop-down menu, something like this:

 
  <select>
    <option onclick="do_fancy_stuff();">Fancy Stuff</option>
    <option onclick="do_cool_stuff();">Cool Stuff</option>
    <option onclick="remove_ugliness();">Remove Ugliness</option>
  </select>

Because you're a sane human being, you don't use IE6 as your browser, you only have it running inside a virtual machine called "winxp", or something like that. When you want to test your page on IE6 you type "vboxmanage startvm winxp" on the command line.

Anyway, so you check your site on IE6 and you discover that selecting an item from the menu doesn't do anything! You wonder why and you google it, and (you get here? naa) in my case I came across this: http://www.ozzu.com/website-design-forum/option-onclick-internet-explorer-t55560.html

It provides a good explanation but I don't think the solution is the best out there. It pretty much requires re-writing everything and re-arranging your events so that what function to call depends on the index of the option.

Oh wait, did I mention what the problem is? IE6 doesn't care if the option tag has an onclick event. The only way to make something happen when you select something from the list is to put an onchange event on the *select* tag. and you'll have to use `this.selectedIndex`, or `this[this.selectedIndex]` to get the option that was selected. The suggested solution over there is to use a function that gets the index passed to it as an integer and then decide what to do based on the value of that integer. But that's not really a good idea IMHO.

For me, the solution is quite simple:


  <select onchange="this[this.selectedIndex].onclick()"> {# gotta hate IE6 #}

This will force IE6 to activate the onclick event handler on the options (assuming they all have an onclick handler). The problem of course is that in Firefox this will run onclick twice. So, we have to put this inside some sort of a conditional structure that checks if we're in IE6. My solution is basically this:


<script type="text/javascript">IE6 = false;</script>
<!--[if IE 6]> <script type="text/javascript"> IE6 = true; </script> <![endif]-->
<select onchange="if(IE6) this[this.selectedIndex].onclick()"> {# gotta hate IE6 .. even more now #}
    <option onclick="do_fancy_stuff();">Fancy Stuff</option>
    <option onclick="do_cool_stuff();">Cool Stuff</option>
    <option onclick="remove_ugliness();">Remove Ugliness</option>
 </select>

Of course, it's best to put this snippet

<script type="text/javascript">IE6 = false;</script>
<!--[if IE 6]> <script type="text/javascript"> IE6 = true; </script> <![endif]-->

somewhere (in your setup) so that it's included in every single page.

UPDATE:

Actually, it turns out this applies to all version of IE, not just IE6.

About these ads

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Follow

Get every new post delivered to your Inbox.

%d bloggers like this: