JQuery append with forloop

Question

I have a function that will append a select-box with possibility to choose birthdate. What is the best way to achieve that?

When i run that script the append inside the for-loop is added after the closing-select. Is there any logic to the append, or is it not strict? I thought that the forloop had to be finished before it continued.

function addChildOption(){
  if (counterOption < 3) {
    $("#add-child").append("<select name=\"child" + counterOption + "\" form=\"register\">");
    for(var i = year-15; i > 1900  ; i--){
          $("#add-child").append("<option class=\"choose-year\" value=" + i + ">" + i + "</option>");
    }
    $("#add-child").append("</select>");     
  }
}

The result:

<select form="register" name="child1"></select>
<option class="choose-year" value="1999">1999</option>
<option class="choose-year" value="1998">1998</option>
<option class="choose-year" value="1997">1997</option>
etc....

You can only append elements, not tags. When you append the select element it has to be complete, you can't add the start tag and then the end tag. When you try to add the start tag, the browser will make a complete element out of it, so when you add the options they will end up after the select. — Guffa
– Guffa, Commented Jun 21, 2014 at 16:47

jterry · Accepted Answer · 2014-06-21 16:39:18Z

1

You could construct the select, add the options to that variable, and then append it to the actual form:

var sel = $('<select name="child' + counterOption + '" form="register" />');

for(var i = year-15; i > 1900; i--) {
    sel.append($('<option value="' + i + '" class="choose-year">' + i+ '</option>'));
}

$('#add-child').append(sel);

answered Jun 21, 2014 at 16:39

jterry

6,2473 gold badges32 silver badges37 bronze badges

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

Comments

Issam Zoli · Accepted Answer · 2014-06-21 16:39:28Z

1

function addChildOption(){
  if (counterOption < 3) {
    var html = "<select name=\"child" + counterOption + "\" form=\"register\">");
    for(var i = year-15; i > 1900  ; i--){
          html += "<option class=\"choose-year\" value=" + i + ">" + i + "</option>");
    }
    html += "</select>"
    $("#add-child").append(html);     
  }
}

answered Jun 21, 2014 at 16:39

Issam Zoli

2,7741 gold badge24 silver badges36 bronze badges

Comments

vdubus · Accepted Answer · 2014-06-21 16:50:03Z

1

For my part, I prefer to do thing like this :

function addChildOption() {
    if (counterOption < 3) {
        var addChild = $("#add-child");
        var mySelect = $("<select />").prop("name", "child" + counterOption).prop("form", "register").appendTo(addChild);
        for (var i = year - 15; i > 1900; i--) {
            $("<option />").addClass("choose-year").prop("value", i).text(i).appendTo(mySelect);
        }
    }
}

Like that, I directly add the select to the container, and then, the options to the select.

edited Jun 21, 2014 at 16:50

answered Jun 21, 2014 at 16:42

vdubus

4563 silver badges16 bronze badges

Comments

Bharath · Accepted Answer · 2014-06-21 17:41:56Z

1

Use jQuery Queue

function addChildOption(){
   if (counterOption < 3)
   {
      $("#add-child").append("<select name=\"child" + counterOption + "\" form=\"register\"></select>").queue(function(next){
         for(var i = year-15; i > 1900  ; i--) {
           $(this).children().append("<option class=\"choose-year\" value=" + i + ">" + i + " </option>");
         }
      next();
     });
   }
}

edited Jun 21, 2014 at 17:41

answered Jun 21, 2014 at 17:13

Bharath

5294 silver badges7 bronze badges

Collectives™ on Stack Overflow

JQuery append with forloop

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related