IE capture option element onclick

IE 6 doesn’t support this:

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 element, we’ll apply a single onchange to the entire select list:

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;
    }
}

17 thoughts on “IE capture option element onclick”

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

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.

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

Two remarks:

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 )”
There is no need of getElementById at all, just use ‘this’:
<select onchange=”do( this.value )”>

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’:

Got it Stoyan, thanks. I made those changes.

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

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!

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?

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.

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

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:

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

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…

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.

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

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?

Comments are closed.