動態生成選擇元素和JavaScript關閉

Question

我想動態生成一些<select元素。我正在複製一個現有的，只改變名稱和onchange-Event。這是我的問題所在：每個<select>都有自己的ID。當onChange-Event觸發時，它應該響應元素的值和ID。我不知道如何準確定義JavaScript Closure。我與「THIS.VALUE」嘗試過，但顯然這是行不通...... 我已經找到this例子，但它並沒有爲我工作的時候：/

中的JavaScript：

var i = 0; 
var selectArray = []; 

function addSelector(){ 

var container = document.getElementById("check0"); 

selectArray[i] = document.getElementsByName("select0")[0].cloneNode(true); 
selectArray[i].name = 'select'+i; 
selectArray[i].onchange = function(v, i) { 
     return function() { 
      changeType(v, i) 
     } 
    }(this.value, i); 

container.appendChild(selectArray[i]); 
} 

function changeType(selected, i) { 
    switch (selected) { 
     case 'One': 
      alert(selected+' , '+i); 
      break; 
     case 'Two': 
      alert(selected+' , '+i); 
      break;   
     case 'Three': 
      alert(selected+' , '+i); 
      break; 
     case 'Four': 
      alert(selected+' , '+i); 
      break; 
     case 'Five': 
      alert(selected+' , '+i); 
      break; 
    } 
} 

（我試過張貼藏漢HTML，但由於某種原因，我不是能夠做到這一點;））

Here is the fiddle

Answer 1

this.value不知道在這裏：

function addSelector(){ 
    /* ... */ 
    selectArray[i].onchange = (function(v, i) { 
     return function() { 
      changeType(v, i) 
     } 
    })(this.value, i); 
    /* ... */ 
} 

this將undefined（嚴格模式）或window（正常模式）。 JavaScript應該如何知道this是對已創建/克隆的<select>對象的引用？ this將是你onchange內正確的，所以你不必通過關閉包括這一點，只有索引i必須包括：

selectArray[i].onchange = (function(index) { 
    return function() { 
     changeType(this.value, index) 
    } 
})(i); 

注意，您的警報的語法是錯誤的 - 你應該使用alert(selected + " " + i)相反，因爲第二個參數將被忽略。

參見：

• JSFiddle Demo
• MDN: this

Answer 2

你舉的例子實在是難以效仿。有許多的問題，它

• i永遠不會改變
• this.value沒有，當你把它正確的值，但它很容易從處理程序中找出

的下面的腳本做什麼，我想你需要http://jsfiddle.net/FNFQU/13/

function addHandler(node, index){ 
    node.onchange = function() { 
     alert('Changed select index ' + index + '. Its value is ' + node.value); 
    } 
} 

function duplicateSelectElement() { 
    var container = document.getElementById("check0"); 
    var allSelects = document.getElementsByName("select"); 
    var firstSelect = allSelects[0]; 
    var newSelect = firstSelect.cloneNode(true); 
    addHandler(newSelect, allSelects.length + 1); 
    container.appendChild(newSelect); 
} 

addHandler(document.getElementById('select0'), 1); 

document.getElementById('btn').onclick = duplicateSelectElement; 

使用下面的HTML

<input type="button" 
     id="btn" 
     value="Add Selector!" /> 
<div id="check0"> 
<select id="select0" name="select"> 
    <option selected>One</option> 
    <option>Two</option> 
    <option>Three</option> 
    <option>Four</option> 
    <option>Five</option> 
</select> 
</div>​