IE capture option element onclick

August 8, 2006 / Filed under: Browsers, JavaScript

IE 6 doesn’t support this:

<select id="do">

    <option onclick="do('Do This')" value="Do This"> Do This </option>
    <option onclick="do('Do That')" value="Do That"> Do That </option>

</select>

This is aggravating, when you need to perform a certain function, dependent upon each option chosen from the list.

For example, if someone chooses "Do This" from the select list, I need a certain function to run. However, if someone chooses "Do That" from the select list, I need a different function to run.

Turns out IE only recognizes onchange.

So, instead of applying an onclick to each <option> element, we’ll apply a single onchange to the entire select list:

<select id="do" onchange="do( this.value )">

    <option value="Do This"> Do This </option>
    <option value="Do That"> Do That </option>

</select>

The JavaScript do function could look something like this:

function do( optionValue )
{
	switch( optionValue )
	{
		case "Do This" :
		
			// SPECIFIC CODE HERE
		
		break;
		
		case "Do That" :
		
			// SPECIFIC CODE HERE
		
		break;
	}
}

Comments/Mentions

# Luke at 6/4/2009 3:52 pm cst

This is a great work around for IE but it is now restricted by onchange events. If you click the same option value twice it will only respond the first time until you click another option value(hence the onchange event). Does anyone know of a way to workaround this so that every time you click the option value it will launch the event similar to how onclick works?

# Matthom at 10/31/2008 6:33 am cst

Shane, yes, optionValue represents the value being selected in the drop-down list.

# Shane at 10/31/2008 5:55 am cst

I am a javascript newbie (but a PHP apprentice), so please bare with me and thanks for the article, it is just what I was looking for.

What exactly does "optionValue" represent here? Is the the value that is being select from the dropdown box?

I have a good feeling I can do everything with this I need to with a PHP loop.

# Dreas at 8/20/2008 12:50 am cst

The reason that the example code doesnt work is because 'do' is a reserved word in javascript, used in the 'do...while' loop.

If you change the function name, it will work like a charm...

# iflow at 7/5/2008 12:27 am cst

Thank you very much for the article! I hate IE ! :)

# Zebulon Evans at 5/20/2008 5:27 pm cst

This time with the markdown syntax. If you are looking for just the onclick and you are not using the drop down in a form this should work for you:
# Zebulon Evans at 5/20/2008 5:24 pm cst

If you are looking for just the onclick and you are not using the drop down in a form this should work for you:

# dbu at 5/7/2008 7:35 am cst

Klaus, there is the "default:" part of the switch/case statement.

... case "Do That" : // SPECIFIC CODE HERE break; default: // fallback code break; ....

default is used if none of the cases matched.

# Klaus T at 9/18/2007 8:49 am cst

Any way to include some kind of "else" in this script? So that if none of the "case" are true, it will run a different function?

# Phpster at 8/27/2007 5:02 pm cst

Thank you very much for this information... And I hate IE!! I don't know how can Microsoft Create and support such a lousy browser!

# Mary at 8/3/2007 12:04 pm cst

it doesn't work. i can't make that example working

# Matthom at 1/19/2007 8:49 am cst

Got it Stoyan, thanks. I made those changes.

# stoyan at 1/19/2007 8:39 am cst

And validate your feedback against html entities :) So the second remark should be: 2. There is no need of getElementById at all, just use 'this':

# stoyan at 1/19/2007 8:36 am cst

Two remarks:

  1. onchange="do( document.getElementById("do").value )" is invalid, bacause it has double quotes enclosed in double quotes. The right way is ="do( document.getElementById('do').value )"
  2. There is no need of getElementById at all, just use 'this': <select onchange="do( this.value )">

# tai at 9/19/2006 1:26 pm cst

This dog bit me for like an hour. Hate IE...

# Matthom at 8/18/2006 7:13 am cst

Good point. Just put an empty <option> element as the very first list item. That way, the REAL first option still has to be selected, therefore using the onchange event.

# Tom at 8/18/2006 7:09 am cst

Doesnt work if you want to select the first item on the dropdown