setTimeout adding +1 to for loop "i" during elapsed time
<p>I have 3 sequential or subordinates drop-down menus that could be either selected by the user ( which works fine ) or, in some instances, need to be selected via js.</p>

<p>I have set a timeout to give time to js to populate the first drop-down before the options are available to be selected in the sequence. It does not work otherwise.</p>

<p>The problem is that somehow during the elapsed time of the setTimeout, var "i" is being added of one, which throws off the script.</p>

<p>If I force "i" to be equal to zero in the case where I have only one input to consider, this will work fine. As this is dynamic and I cannot do that, I am looking on ways to stop this behavior.</p>

<p>The code below stops at the 2nd drop-down. </p>

<p>Is setTimeout the good solution in this case?
Thanks.</p>

<pre><code>$( document ).ready(function() {
    var ctvid = &lt;?php echo $ctvid ;?&gt;;
    if(ctvid !=""){
    var info = &lt;?php echo json_encode ($info);?&gt;;
    for (var i=0;i&lt;ctvid;i++){
        $('#brand' + i).val(info['brand_id'][i]).change();
            setTimeout(function(){
            $('#model' + i).val(info['model_id'][i]).change(); 
            },500); 
    }   
    }
});
</code></pre>
