Problem with nested for loops in jQuery

Question

I'm a jQuery newbie, so be gentle! I have a loop that outputs extra fields in a form (based on value). All good so far. However, in my extra fields is a date of birth set, which I normally create days/years options using a loop. My question is, how do I create this inner loop inside my outer loop? Here's the basic outline so far:

    function addRow() {
    for(var i=1;i<numPax;i++)
    {
     $('#additionalPax').append("My additional fields HTML in here.");
    }
}

Now what I want to do is add a loop in my append string to create my day select for example. This isn't right, but something like this:

    function addRow() {
        for(var i=1;i<numPax;i++)
        {
         $('#additionalPax').append("<select name='dobDay'><option selected='selected' value='1'>1</option>"+for(var d=2;d<32;d++){+"<option value="+(d)+">"+(d)+"</option>"+}+"</select>");
        }
}

Any help very much appreciated.

Answer 1

You can not do it that way. Build the select outside the for loop and put it in a variable that you then can use inside the for loop:

function addRow() {
    var $elem = $('#additionalPax'),
        buffer;
    buffer = "<select name='dobDay'><option selected='selected' value='1'>1</option>";
    for (var d=2; d<32; d++) {
        buffer += "<option value="+(d)+">"+(d)+"</option>";
    }
    buffer += "</select>";
    for (var i=1; i<numPax; i++) {
        $elem.append(buffer);
    }
}

Answer 2

You'll have to copy the whole string in a temporary variable first, then send it to the append function.

var strOption = "";

for(var d = 2; d < 32; d++) {
    strOption += "<option value=" +  d + ">" +  d  + "</option>";
}

EDIT: For creating dynamic elements, use document.createElement instead, as its faster than the jQuery alternative, although jQuery v1.3 has optimized this, but document.createElement is still faster.

Answer 3

Just build a string like this:

function addRow()
{
    for(var i=1;i<numPax;i++)
    {
     var str = "<select name='dobDay'><option selected='selected' value='1'>1</option>";

     for(var d = 2; d < 32; d++)
     {
      str += '<option value="' + d + '">' + d + '</option>';
     }

     str += '</select>';

     $('#additionalPax').append(str);
    }
}

Answer 4

may be something like what you are looking for

function addRow() {
 for(var i=1;i<numPax;i++)
 {
   var data = "";
   for(var d=2;d<32;d++)
   {
     data += "<option value="+d+">"+d+"</option>";
   }

   $('#additionalPax').append("<select name='dobDay'><option selected='selected' value='1'>1</option>"+data+"</select>");
 }
}

Answer 5

You could use this code:

<select id="additionalPax"></select>
<script type="text/javascript">
    function CreateDays()
    {
     var options = '';
     for (var i = 1; i <= 31; i++)
     {
                 options += (i == 1) ? 
                 "<option selected='selected' value='" + i + "'>" + i + "</option>" : 
                 "<option value='" + i + "'>" + i + "</option>";
     }

     $('#additionalPax').html(options);
    }
    CreateDays();
</script>