0

我想<select动态生成一些元素。我正在复制一个现有的，只更改名称和 onchange-Event。这就是我的问题所在：每个<select>人都有自己的 ID。当 onChange-Event 触发时，它应该响应元素的值和 ID。我不知道如何准确定义 JavaScript 闭包。我用“this.value”尝试过，但显然这不起作用......我已经找到了这个例子，但它根本不适合我：/

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，但由于某种原因我无法做到这一点；））

这是小提琴

4

2 回答 2

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)改用，因为第二个参数将被忽略。

也可以看看：

于 2012-05-29T20:12:22.253 回答
1

你的例子真的很难遵循。它有很多问题

  • 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>​
于 2012-05-29T20:15:43.370 回答