Cross browsers form select element event handler

[alvinwoon]

Hi guys,

I find it frustrating that I need to sniff out IE to make event
handler for the form's select element work across different browsers.
Here's a summary of what I have right now:

var select = /*get the form select element*/
var option = /*get all the option elements*/

if(document.all){

addEvent(select,"change",executeFunction);

}

else{

addEvent(option,"click",executeFunction);

}

FYI, I am using John Resig's addevent.

Any advises would be much helpful. Thanks

 

[Randy Webb]

(e-mail address removed) said the following on 2/4/2007 12:10 PM:

Hi guys,

I find it frustrating that I need to sniff out IE to make event
handler for the form's select element work across different browsers.

Your code doesn't "sniff out IE", it sniffs out document.all support.
The difference is huge when it comes to Opera and others.

And, the form's select element event handlers work fine, it is the event
handler for OPTION elements you are having problems with.

FYI, I am using John Resig's addevent.

Never heard of it.

 

[alvinwoon]

(e-mail address removed) said the following on 2/4/2007 12:10 PM:



Your code doesn't "sniff outIE", it sniffs out document.all support.

The difference is huge when it comes to Opera and others.

And, theform'sselectelement event handlers work fine, it is the event
handler for OPTION elements you are having problems with.


Never heard of it.

--
Randy
Chance Favors The Prepared Mind
comp.lang.javascript FAQ -http://jibbering.com/faq/index.html
Javascript Best Practices -http://www.JavascriptToolbox.com/bestpractices/

oh i'm very well aware of the document.all object detection. Sorry for
not being clear enough. The whole point is just to show that I have to
sniff out IE to make it work, not so much as to how I do it or
anything.

Anyway, I think I have found the solution in getting the option value:

var optionValue = this.getAttribute('value') ||
this[this.selectedIndex].value;

Use the first one if you try to get the value by listening to the
onclick event of the 'option' element. The second one is when you try
to get the value by listening to the 'onchange' event of the 'select'
element.

Hope that helps. Thanks.

 

[RobG]

Hi guys,

I find it frustrating that I need to sniff out IE to make event
handler for the form's select element work across different browsers.
Here's a summary of what I have right now:

You should use feature detection.

var select = /*get the form select element*/
var option = /*get all the option elements*/

if(document.all){
addEvent(select,"change",executeFunction);
}
else{
addEvent(option,"click",executeFunction);
}

I don't understand why you are using a different event in different
browsers. Can't you just get the value of the selected option
onchange of the select?

FYI, I am using John Resig's addevent.

I have no idea what that is. Try the following (be careful of IE's
memory leak) which uses a pretty standard addEvent function and makes
IE's this keyword work the same as the W3C event model:

<script type="text/javascript">
function addEvent(el, evType, fn, useCapture) {
if (el.addEventListener) {
el.addEventListener(evType, fn, useCapture);
} else if (el.attachEvent) {
var r = el.attachEvent('on'+evType, function(){fn.call(el);});
} else {
el['on' + evType] = fn;
}
}
function showValue(el){
document.getElementById('d0').innerHTML =
el.options[el.selectedIndex].value;
}
window.onload = function(){
var el = document.forms['f0'].elements['sel0'];
addEvent(el, 'change', function(){showValue(this);}, false);
}
</script>

<form action="" id="f0">
<select name="sel0">
<option value="opt1">opt1
<option value="opt2">opt2
<option value="opt3">opt3
</select>
</form>
<div id="d0"></div>


Incidentally, if you are only adding one handler, it is much simpler
to write

select.onchange = showValue;

And then in the showValue function, 'this' will be a reference to the
select element in both IE and W3C event models.