window.event.srcElement.options NOT Work on FF

window.event.srcElement.options(window.event.srcElement.select开发者_运维问答edIndex).value works in Internet Explorer (and Chrome) but not in FireFox. How to make this work in FireFox as well?

event.target.options[event.target.selectedIndex].value. Though as always with events you'd have to have passed the event object into a function, so eg.:

<script>
    function selectChanged(event) {
        var target= event.target || event.srcElement;
        doSomethingWith(target.options[target.selectedIndex].value);
    };
</script>

<select onchange="selectChanged(event)">...</select>

Setting the handler directly and using this may be easier:

<select id="x">...</select>

<script>
    document.getElementById('x').onchange= function() {
        doSomethingWith(this.options[this.selectedIndex].value);
    };
</script>

Note that looking at options[selectedIndex] is for compatibility with older browsers. These days you can usually just get away with saying select.value.

There is no global event object in Firefox. Events are passed to their handlers as an argument. Also, instead of srcElement, you look for target.

If you use a javascript library like jQuery, all the browser specific quirks are handled for you.

Otherwise, I suggest you to read these articles

• http://www.quirksmode.org/js/introevents.html
• http://www.quirksmode.org/js/events_properties.html

var addEvent = (function() {
function addEventIE(el, ev, fn) {
    return el.attachEvent('on' + ev, function(e) {
    return fn.call(el, e);
    });
}
function addEventW3C(el, ev, fn) {
    return el.addEventListener(ev, fn, false);
}
return window.addEventListener ? addEventW3C:addEventIE;
})();

var domRef = document.getElementById('foo');

addEvent( domRef, 'change', function(e) {
    e = e || window.event;
    var el = e.target ? e.target : e.srcElement,
        value = el.value;
    alert( value )
});

in IE, event is a property of window, in modern DOM supporting browsers it's passed as the first argument.

IE uses srcElement where most other browsers (including Firefox) use target.

Also, Firefox passes around event objects, whereas IE just populates the global event object w/the current event's data.

You'll have to handle both in your code. How you handle the 2nd one will depend on how you're assigning the handler.

But here's one way.

function changeHanlder( event )
{
  var elem = event.target || event.srcElement;
  alert( elem.options[elem.selectedIndex].value );
}

It's also worth noting that all the modern javascirpt libraries handle this abstraction for you.

There are two approaches: Assume there is markup

<SELECT name="ddlQuery" id="ddlQuery" style="width:273px;"
        onchange="GetDropDownValue(event)">
...

on HTML.

One using js function:

function GetDropDownValue(e)
{
    var rtnVal = "";
    var sel = document.getElementById(getTargetID(e));
    for (var i = 0; i < sel.options.length; ++i) {
        if (sel.options[i].selected == true) {
            rtnVal = sel.options[i].value;
            break;
        }
    }
    alert(rtnVal);
    return rtnVal;
}

function getTargetID(e) {

    if (!e) { var e = window.event; }
    var objTarget = e.srcElement ? e.srcElement : e.target;
    return objTarget.id;
}

another using jQuery:

$('#ddlQuery').val()

Firefox uses e.htmlEvent.target.nodeName

you can use try/catch to handle both browsers.