Question

I’m trying to edit the ‘onchange’ event of an existent ‘select’ element.

For example purposes I have the following code:

<select id="sel_id" onchange="javascript:foo();" >

and whenever I try to change its ‘onchange’ attribute I was using the following:

$("#sel_id").attr("onchange", "foo_2()");

FYI, this code which should be fine doesn’t work, the ‘onchange’ attribute remains unchanged. So how should you edit it?

AMMENDMENT:

You can remove the attribute and then bind a different function like:

$("#sel_id").removeAttr("onchange").bind("change", function(){ foo_2(); });   

but the issue remains, is it possible to change the ‘onchange’ attribute without removing it in the first place?

Answer 1

Not an exact answer to the question, but I’d probably remove the event using this:

document.getElementById('sel_id').onchange = undefined;

(as seen at How to Clear/Remove JavaScript Event Handler? )

and then go with this:

$('#sel_id').change(function() { foo_2(); });