How to add onChange attribute for select box from Javascript / jQuery

Question

I have select box with out onChange attribute. Now after loading the total page, based on some conditions I have to add onChange for the select box from Javascript. I am trying with the following code, but its not working:

$("#depositForm").attr(("onChange", "selectedMainDepositType('this');" ));

Its is not adding the onChange event.

<select id="depositForm_depositSubType" class="depositSubType" style="width:160px;" name="depositSubType">

has to be changed as

<select id="depositForm_depositSubType"  onchange="selectedMainDepositType(this);"  class="depositSubType" style="width:160px;" name="depositSubType">

Please suggest how to add the onChange attribute.

There's almost never a good reason to use any of the `[on*]` attributes, so don't bother. — zzzzBov, Sep 19 '12 at 14:30
don't think about event as you do with attributes ... in-line events are parsed at document loading and it is not meant to be edited like a classic attribute afterward — Stphane, Sep 19 '12 at 14:33

JoeFletch · Accepted Answer · 2012-09-19T14:33:57.027

22

Did you try...

$("#depositForm").on("change", function(event) { 
     selectedMainDepositType(this);
} );

jQuery .on()

edited Sep 19 '12 at 14:33

answered Sep 19 '12 at 14:28

JoeFletch

3,820
1
27
36

If you need to remove the handler, use `$("#depositForm").off("change");`. Is the attr `onChange` attached when the page is generated? – JoeFletch Sep 19 '12 at 14:48

score 6 · Answer 2 · answered Sep 19 '12 at 14:28

6

$("#depositForm").change(function(e){
    selectedMainDepositType($(this));
});

answered Sep 19 '12 at 14:28

John Conde

217,595
99
455
496

score 0 · Answer 3 · edited May 23 '17 at 12:02

0

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

 $("#depositForm").change(..);

Give it a shot.. I hope it works out for you.. Original post How to edit 'onchange' attribute in a 'select' tag? (using jquery)

edited May 23 '17 at 12:02

Community

1
1

answered Sep 19 '12 at 14:58

Scorpio

1,151
1
19
37

score 0 · Answer 4 · answered Jun 05 '13 at 14:24

For anyone looking for another answer. I used this method because I had to first search for the dynamically created select list.

var dropdown = document.getElementsByTagName("select");
for (i=0; i<dropdown.length; i++) {
    if (dropdown[i].title == "Component") {
        dropdown[i].onchange = changeApproverCC;
    }
}

score 0 · Answer 5 · answered Jul 03 '20 at 17:29

0

You could try this:

document.getElementById("depositForm").addEventListener('change', (event) => {
 selectedMainDepositType('this');
});

Hope can help you :)

answered Jul 03 '20 at 17:29

paas

11
1

How to add onChange attribute for select box from Javascript / jQuery

5 Answers5