IE capture option element onclick Aug08 '06

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

Categories: Browsers , JavaScript

Add Feedback (view all)

Leave feedback

Feedback

Input format: The editor controls below will assist with Markdown syntax.

Status

Sub-status

Your info Name: Email (will not show on page):

Follow new comments via email? (You can turn this off any time)

Do you want your comments emailed to yourself?

Home Page (optional):

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

Good point. Just put an empty <option> element as the very first list item. That way, the REAL first option still has to b ... Read more.

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

Two remarks: onchange="do( document.getElementById("do").value )" is invalid, bacause it has double quotes enclosed in double quotes ... Read more.

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': ... Read more.

Got it Stoyan, thanks. I made those changes. ... Read more.

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

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! ... Read more.

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? ... Read more.

Klaus, there is the "default:" part of the switch/case statement. ... case "Do That" : // SPECIFIC CODE HERE break; default: // ... Read more.

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

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 ... Read more.

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

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 ... Read more.

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 ... Read more.

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

matthom is published and produced by Matt Thommes - an independent publishing enthusiast, mobile blogger, content creator, informative writer, web developer from Chicago. Never one to conform, Matt intends to promote the effect the web has on our lives, in an effort to intensify, instruct, and clarify all that is happening around us.