Question

I have this javascript snippet:

var selectName["id1","id2","id3"];
setOnClickSelect = function (prefix, selectName) {
        for(var i=0; i<selectName.length; i++) {
            var selId = selectName[i];
            alert(selId);
            $(selId).onchange = function() {
                $(selId).value = $(selId).options[$(selId).selectedIndex].text;
            }
        }
    }

But when I change value to my id1 element, the alert wrote me always “id3”.
Can I fix it?

EDIT:
I’ve changed my snippet with these statements:

setOnChangeSelect = function (prefix, selectName) {
        for(var i=0; i<selectName.length; i++) {
            var selId = selectName[i];
            $(selId).onchange = (function (thisId) {
                return function() {
                    $(selId).value = $(thisId).options[$(thisId).selectedIndex].text;
                }
            })(selId);
        }
    }

But selId is always the last element.

Answer 1

This is caused by the behavior of javaScript Closure, selId has been set to the selectName[2] at the end of the loop and that’s why you get ‘id3’ back.

An fix is as following, the key is wrap the callback function inside another function to create another closure.

var selectName = ["id1","id2","id3"];

var setOnClickSelect = function (prefix, selectName) {
        for(var i = 0; i < selectName.length; i++) {
            var selId = selectName[i];
            $(selId).onchange = (function (thisId) {
              return function() {
                $(thisId).value = $(thisId).options[$(thisId).selectedIndex].text;
              }
            })(selId);
        }
    };

Ps: there is synyax error for var selectName["id1","id2","id3"], you should use var selectName = ["id1","id2","id3"];