複数のselect要素の最後に追加されたonchange関数のみが呼び出されます

Question

私は、各select要素内に複数のselect要素をプログラムで作成しています。私はselect要素のそれぞれのidを私に警告する独自のonchange関数を各select要素にプログラム的に割り当てる必要があります。

$(document).ready(function() { 

    // Headers indicate how many select elements I need. 
    // In this example, they are only used to initialize a unique select.id 
    for (var ndx = 0; ndx < headers.length; ndx++) { 
     var header = headers[ndx]; 
     const rowName = header.innerHTML; 
     var select = document.createElement("select"); 
     var options = ["Contains", "Equals", "Starts with", "More than", "Less than", "Between", "Empty", 
      "Doesn't contain", "Doesn't equal", "Doesn't start with", "Is not more than", "Is not between", "Is not empty"]; 

     select.id = rowName + "-select"; 
     options.forEach(function(option) { 
      var element = document.createElement("option"); 
      element.value = option; 
      element.innerHTML = option; 
      select.appendChild(element); 
     }); 
     select.onchange = function() { 
      alert("select.id: " + select.id); 
     } 
    } 
} 

はしかし、選択要素のいずれかのオプションを変更すると、非常に最後のselect要素の 唯一のIDは、アラートに示されています。これは私が慣れていない問題を参照するjavascriptかもしれませんか？助けてくれてありがとう。

Answer 1

javascriptの変数は、宣言されている関数スコープの先頭に持ち込まれます。実際には、これはすべての反復で変数selectを新しい選択ボックスに置き換えることを意味します。これは、すべてのリスナーが同じ選択変数を参照することを意味します。ループの最後には、最後に選択された選択項目への参照が含まれます。

ソリューション

ラップ生命維持でリスナー登録（すぐに呼び出される関数式）、それは引数として渡すことを選択。このようにして、selectの値は現在の反復のみにバインドされます。

(function(select) { 
    select.onchange = function() { 
     alert(select.id); 
    } 
})(select); 

編集：

リスナーを実装するより正確な方法は、それに渡されたイベントオブジェクトを使用することです：

select.onchange = function(e) { 
    alert(e.target.id); //e.target refers to the element that originated the event 
} 

をしかし、私は上記のように答えを残していますよくあなたのコードの巻上げ/スコープに関連する問題もあり、それは非常に一般的な間違いです。