ループの問題

Question

このコードを使用していますが、うまくいきます。今、私は入力の名前だけを変更する必要があります、入力1、入力2、など。

<script type="text/javascript"> 
    $(document).ready(function() { 
     $("#input1 > select.profissao").live('change', function(){ 
      $.ajax({ 
       type: "POST", 
       data: "data=" + $(this).val(), 
       url: "drop1.php", 
       success: function(html) { 
        $("#input1 > select.estatistica").html(html); 
       } 
      }); 
     }); 
}); 
</script> 

なぜこのバージョンが機能しないのですか？私はすでにlintでコードをチェックし、エラーは検出されません。 基本的に上記のコードをコピーしてinput1をinput2に変更すると正常に動作しますが、私の目的は冗長性を減らすことです。

<script type="text/javascript"> 
    $(document).ready(function() { 
     for (i=1; i<3; i++) { 
     $("#input"+i+" > select.profissao").live('change', function(){ 
      $.ajax({ 
       type: "POST", 
       data: "data=" + $(this).val(), 
       url: "drop1.php", 
       success: function(html) { 
        $("#input"+i+" > select.estatistica").html(html); 
       } 
      }); 
     }); 
     } 
    }); 
</script> 

EDIT：出力はその<option value=2>Artes</option><option value=1>Humanidades</option>ようなものですが、これは、単純なストップダウン私のドロップが

Answer 1

を動作するようにループしてHTML

に追加されていないあなたは

を試すことができます

<script type="text/javascript"> 
$(document).ready(function() { 
    for (i=1; i<3; i++) { 
     (function(idx){ 
      $("#input"+idx+" > select.profissao").live('change', function(){ 
      $.ajax({ 
       type: "POST", 
       data: "data=" + $(this).val(), 
       url: "drop1.php", 
       success: function(html) { 
       $("#input"+idx+" > select.estatistica").html(html); 
       } 
      }); 
      }); 
     })(i); 
    } 
}); 
</script> 

そして、あなたの関数はスコープ内でiの同じ参照を取得します。

Answer 2

トップブロックとボトムブロックには異なるクラスがあります。選択問題は1つですか？

また、連結アプローチは維持しにくいようです。また、IEで選択のHTMLコンテンツをスワップアウトすることは非常によく対応していないですし、再構築を検討する必要がありますので、私にとってはかなりの数のバグにつながっている：

おそらく、この

$('#input1, #input2, #input3').children('select.area').each(function() { 
     $(this).live(...); 
    }); 

編集のようなものを使用することを検討してくださいあなたがHTMLを投稿することができる度に、