Question

I’m trying to bind an onChange event to 7 dropdowns inside a loop. But when any of dropdown changes, the onChange event for the last one is always executed.

$(function () {
    for (var i = 1; i <= 7; i++) {
        $('select[id$="bodysys' + i + '"]').change(function () {
            if (this.value == "99")
                enabletextbox($('input[id$="bodysys' + i + 'spec"]')[0]);
        });
    }
}

How to make onChange work for all elements separately?

Answer 1

This is called the last one only problem, and is solved using a closure:

$(function () {
    for (var i = 1; i <= 7; i++) {
        (function (i) {
            $('select[id$="bodysys' + i + '"]').change(function () {
                if (this.value == "99")
                    enabletextbox($('input[id$="bodysys' + i + 'spec"]')[0]);
            });
        })(i);
    }
}

It creates a new scope, so when i is changed in the original scope, it will not be changed in the old scope.