Can't create dropdown box with javascript and jquery

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:

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

But this is what actually happens:

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

Does anyone know why?

Irfan · Accepted Answer · 2011-10-08 14:05:32Z

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>');

}

answered Oct 8, 2011 at 14:05

Irfan

7,0593 gold badges46 silver badges59 bronze badges

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

Comments

Clive · Accepted Answer · 2011-10-08 13:37:18Z

1

I think append adds a full element to the DOM rather than just adding the text into the HTML as it were. Try building up your elements individually and adding them a bit like this:

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

answered Oct 8, 2011 at 13:37

Clive

36.9k8 gold badges89 silver badges113 bronze badges

Comments

Jon Egerton · Accepted Answer · 2012-01-10 09:30:19Z

1

From the documentation:

The .append() method inserts the specified content as the last child of each element in the jQuery collection.

The options you want to add should be the child elements of the select, not the div.

edited Jan 10, 2012 at 9:30

Jon Egerton

41.7k11 gold badges100 silver badges130 bronze badges

answered Oct 8, 2011 at 13:39

metalleke

111 silver badge3 bronze badges

Collectives™ on Stack Overflow

Can't create dropdown box with javascript and jquery

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related