problem in loop for

i am using this code, that works well. Now i need to change only the name of inputs, input1, input 2, and so on.

<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>

why reason this version doesn't work? i already check the code in lint, and none error is detected. Basically if i copy the code above and change input1 to input2, works well, but my objective is reduce 开发者_如何学JAVAthe redundancy.

<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: the output is something like that <option value=2>Artes</option><option value=1>Humanidades</option> but this is not added to the html

with the loop my drop down simple stops to work

You can try

<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>

And your function get the same reference of i in a scope.

The top and bottom block have different classes for the selects is that one problem?

Also the concatenation approach seems less maintainable.

Perhaps consider using something like this

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

Edit: also swapping out html contents of selects in ie is not very well supported and has led to quite a few bugs for me so you may want to consider rebuilding the select each time