Question

I have the following code:

for (i = 0; i < 13; i++){
    $('.players').append('<div class="rule_dropdown"><select name="rule' + i + '">');
    for(j = 0; j < rules.length; j++){
        $('.players').append('<option>' + rules[j] + '</option>');
    }
    $('.players').append('</select></div>');

}

I want to have 13 dropdown lists with the same content. I expect this to happen:

1. First for loop add an opening div and select
2. For each rule in rules array, append an option
3. Add closing select and closing div
4. Go back to #1

But this is what actually happens:

1. First loop add opening AND closing div and select.
2. Second loop add option with the right content

Does anyone know why?

Answer 1

I think this is what you want to do..

var rules=[1,2,3,4,5,6];
    for (i = 0; i < 13; i++){
    $('.players').append('<div class="rule_dropdown"><select id="rule'+ i +'" name="rule' + i + '">');
    for(j = 0; j < rules.length; j++){
        $('#rule'+i).append('<option>' + rules[j] + '</option>');
    }
    $('.players').append('</select></div>');

}