ansaurus

Question

How to edit 'onchange' attribute in a 'select' tag? (using jquery)

Answer 1

+1 A:

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 http://stackoverflow.com/questions/803936/clear-remove-javascript-event-handler )

and then go with this:

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

Justin Russell 2010-09-03 17:13:08

Yes, that's the correct answer, I sure need to remove the event and bind my own using jquery.

vitorhsb 2010-09-05 10:53:01

Answer 2

A:

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.

patrick dw 2010-09-03 17:15:12

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 2010-09-03 17:40:14

@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.

patrick dw 2010-09-03 18:03:13

Answer 3

+1 A:

Use JQuery change function.

$('#sel_id').change(function() {
  //your code
});

jcubic 2010-09-03 17:19:17

This way it still triggers the onchange event declared in the select tag.

vitorhsb 2010-09-03 17:31:19

Then use $('#sel_id').unbind('change') first

jcubic 2010-09-03 17:42:11

`$('#sel_id').unbind('change')` actually doesn't remove the previous event declared in the html tag, it only removes the bind events declared dinamically.

vitorhsb 2010-09-03 17:44:05

Answer 4

A:

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>

akellehe 2010-09-03 17:19:46

ansaurus

tags:

views:

answers:

How to edit 'onchange' attribute in a 'select' tag? (using jquery)

related questions