problem in loop for

Question

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

can you post your HTML, I have a feeling that you can probably handle this without an event handler for every input. — Ben
– Ben, Commented Jun 24, 2011 at 2:07

score 3 · Accepted Answer · 2011-06-24 02:11:31Z

3

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.

edited Jun 24, 2011 at 2:11

answered Jun 24, 2011 at 2:05

user612827

Sign up to request clarification or add additional context in comments.

2 Comments

Diego Over a year ago

I think this is correct. It's because of javascript closures. A good explanation here developer.mozilla.org/en/JavaScript/Guide/…

Ben Over a year ago

@user455318 jQuery internally applies the event handler to all elements if you select them by class. It would be more efficient than setting up a live to monitor the change event for every input.

anthony sottile · Accepted Answer · 2011-06-24 02:07:23Z

0

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

answered Jun 24, 2011 at 2:07

anthony sottile

72k19 gold badges198 silver badges246 bronze badges

1 Comment

user455318 Over a year ago

different classes for the selects? where?

Collectives™ on Stack Overflow

problem in loop for

2 Answers 2

2 Comments

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Related