jQuery追加forloop

Question

我有一个功能，将追加选择框与可能性选择出生日期。什么是实现这一目标的最佳方式？

当我运行该脚本时，关闭选择后添加for循环内的追加。对追加有没有逻辑，还是不严格？我认为在继续之前必须完成forloop。

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>");  
    } 
} 

结果：

<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.... 

Answer 1

你可以构建select，添加选项，该变量，然后将其附加到实际的形式：

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

Answer 2

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

Answer 3

对于我的看法T，我喜欢做的事情是这样的：

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

那样，我直接添加选择的容器，然后选项来选择。

Answer 4

使用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(); 
    }); 
    } 
}