CODEWITHSUNDEEP
javascriptjquery
Adam
Adam

Reputation: 9049

Creating a loop that populates a select tag

function buildOrder(data) {
    var $fragment;
    $fragment = $('<div/>');
    for (var i = 0; i < data.length; i++) {
        $fragment.append('<div class="row-container"><div class="row cupcake-row">' + data[i].name + '</div><div class="clear"></div></div>');
    }
    $('#review-section').append($fragment);
}

I essentially want to add a tag with 50 options being dynamically created using a for loop. But I'm not sure what the syntax would be to add it to the <div class="row-container"/> I know in php I would just throw the loop in the middle and echo the options, however that doesnt work in javascript.

EDIT:

It would look like this:

$fragment.append('<div class="row-container"><div class="row cupcake-row">' + data[i].name + '</div><select><option value="1">1</option> etc...</select><div class="clear"></div></div>');

Upvotes: 0

Views: 272

Answers (3)

pimvdb
pimvdb

Reputation: 154838

You could pass a function to .append and do your loop there:

$("<div>").append(function() {
  var $select = $("<select>");
  for(var i = 1; i <= 50; i++) {
    $("<option>").text(i).val(i).appendTo($select);
  }
  return $select;
});

// returns a jQuery object with one div element (with children):
// <div>
//   <select>
//     <option value="1">1</option>
//     ...
//   </select>
// </div>

Mixed into your code it would be along the lines of:

var $fragment = $("<div>");

for (var i = 0; i < data.length; i++) {
    var $container = $("<div>").addClass("row-container")
                               .appendTo($fragment);

    $("<div>").addClass("row cupcake-row")
              .text(data[i].name)
              .appendTo($container);

    $("<div>").append(function() {
      var $select = $("<select>");
      for(var i = 1; i <= 50; i++) {
        $("<option>").text(i).val(i).appendTo($select);
      }
      return $select;
    }).appendTo($container);

    $("<div>").addClass("clear")
              .appendTo($container);
}

$("#review-section").append($fragment);

Upvotes: 1

thecodeparadox
thecodeparadox

Reputation: 87073

According to your posted code:

function buildOrder(data) {
    var $fragment;
    $fragment = '<div><div class="row-container">';
    for (var i = 0; i < data.length; i++) {
        $fragment += '<div class="row cupcake-row">' + data[i].name + '</div><div class="clear"></div>';
    }
    $fragment += '</div></div>';
    $('#review-section').append($fragment);
}

But in your posted code doesn't match with your post title, where you mentioned about select tag and in your code you're trying with div.

If you want to create a select, then something like:

function buildOrder(data) {
        var $fragment;
        $fragment = '<div class="row-container"><select>'; // taking select within your div
        for (var i = 0; i < data.length; i++) {
            // adding options to select
            $fragment += '<option value="'+ data[i].name +'">' + data[i].name + '</option>';
        }
        $fragment += '</select></div>'; // end select and div
        $('#review-section').append($fragment);
    }

Upvotes: 0

MelkorNemesis
MelkorNemesis

Reputation: 3435

Try something like this

function buildOrder(data) {
    var $fragment = $('<div></div>');
    var options = [];

    for (var i = 0; i < data.length; i++) {
        options.push('<div class="row-container"><div class="row cupcake-row">' + data[i].name + '</div><div class="clear"></div></div>');
    }
    $fragment.html(options.join("\n"));

    $('#review-section').append($fragment);
}

Upvotes: 0

Related Questions