Javascript Dynamic OnChange Event

I am trying to dynamically add an on change event to an HTML select object. I can't seem to g开发者_Go百科et it to work. I need the function to call dropDownChange and pass two parameters, this and nextDepth.

   var nextDepth = (int)......
   var selectBox = ......
   selectBox.onchange += function(nextDepth){dropDownChange(this, nextDepth);}; 

Not really sure how to tackle this... I figured this could would work. Any help you be GREATLY appreciated.

Thanks!

function changeonchange(){
    var selectBox = document.getElementById("selectBox");
    var nextDepth = getIntFromSomeWhere();

    selectBox.onchange = function() {
        var targ;
        if (!e) var e = window.event;
        if (e.target) targ = e.target;
        else if (e.srcElement) targ = e.srcElement;
        if (targ.nodeType == 3) // defeat Safari bug
            targ = targ.parentNode;
        dropDownChange(targ, nextDepth);
    };
}

You can get more info about events from http://www.quirksmode.org/js/events_properties.html every time "changeonchange" is called a new scope is created to hold the local variables and that scope is carried along the new onchange handler.

I am assuming that you are looking for a way to pass in this in relation to the current executing object or namespace. To express this, the code example below uses an anonymous function, where this is stored to the variable me. Then when the select's change event triggers, your custom function is called, passing in the two specified variables.

(function() {
    var me = this;
    var selectBox = document.getElementById("selectBox");
    var nextDepth = 2;

    selectBox.onchange = function() {
        dropDownChange(me, nextDepth);
    };
})();