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);
    /* ... */
}

thisundefined(厳格モード) またはwindow(通常モード)になります。thisJavaScript は、それが作成/複製された<select>オブジェクトへの参照であることをどのように知る必要がありますか? thisあなたの の中に正しいonchangeので、クロージャーでこれを含める必要はありません。インデックスのみを含める必要がありますi。

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

alert の構文が間違っていることに注意してくださいalert(selected + " " + i)。2 番目の引数は無視されるため、代わりに使用する必要があります。

以下も参照してください。

于 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 に答える