11

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?

vitorhsb
  • 451
  • 2
  • 5
  • 10

4 Answers4

18

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(); });
Community
  • 1
  • 1
Justin Russell
  • 1,009
  • 1
  • 9
  • 15
  • Yes, that's the correct answer, I sure need to remove the event and bind my own using jquery. – vitorhsb Sep 05 '10 at 10:53
  • 1
    `$('sel_id').attr('onchange',undefined).change(function() { foo_2(); });` is the jQuery way to do it. This way you can just do both operations with one jQuery object. – Muhd May 03 '12 at 01:31
  • 1
    Also OP could probably just do `.change(foo_2)` instead of wrapping in an anonymous function. – Muhd May 03 '12 at 01:33
  • 1
    @Muhd ur code was not working but when I changed the undefined to null it started working. – Parik Tiwari Feb 10 '14 at 03:36
4

Works for me if I use the native setAttribute().

Also, remember that you need quotes around the selector.

$("#sel_id")[0].setAttribute("onchange", "foo_2()");

Also remember to define foo_2 in the global namespace, and not inside jQuery's .ready() function.

user113716
  • 318,772
  • 63
  • 451
  • 440
  • You're right, I forgot the quotes in the example but were used in real code. (edited the question) `setAttribute()` should be the solution for the question, but it actually has the same problem I presented. If a 'onchange' attribute is declared in the element it isn't replaced and the old event code is triggered. Moreover I would rather use an inner scope function in the onchange event. Thus, I may actually use the code I refer in the ammendment. – vitorhsb Sep 03 '10 at 17:40
  • @vitorhsb - From your addition to your question, the issue remains of the `foo()` being called. Is this in IE? You could try setting its `onchange` property to null: `$("#sel_id")[0].onchange = null;`. Not sure if that will help, but perhaps worth a try. – user113716 Sep 03 '10 at 18:03
  • This is Great! There appears to be a bug in IE8 associated with binding a change event to a select. I've tried almost everything (addEventListener, and jQuery .change and .bind. None worked. But, this did. Thanks! – Cary Jensen Jun 26 '11 at 17:08
  • @Cary: Glad this worked, but that's very strange that jQuery's event handling didn't work for you. They do a very good job of fixing those browser issues. Anyway, glad you found a solution. – user113716 Jun 26 '11 at 17:18
2

Use JQuery change function.

$('#sel_id').change(function() {
  //your code
});
jcubic
  • 61,973
  • 54
  • 229
  • 402
0

Here's a way to do it using just javascript:

<html>
<head>
<script type = "text/javascript" langauge="JavaScript">
function foo (){
    alert("foo");
}
function fi() {
    alert('fi');
}
</script>
</head>
<body>
<select id = "select_list" onchange="foo();">
<option value = "1">1</option>
<option value = "2">2</option>
</select>
<input type = "button" value = "change" onclick = "document.getElementById('select_list').onchange = fi;">
</body>
</html>
KeatsKelleher
  • 10,015
  • 4
  • 45
  • 52