Динамически добавить выпадающие Text Box в той же строке Javascript

Question

<div class="row"> 
    <div class="col-md-3" style="padding-top: 10px"> 
    <class="tg-83xr"> <select id="year" name="year"> 

    <script> 
     var myDate = new Date(); 
     var year = myDate.getFullYear(); 

     for(var i = 1900; i < year+1; i++){ 
      document.write('<option value="'+i+'">'+i+'</option>');} 
    </script></select> 
    </div> 

    <div class="col-md-3" style="padding-top: 10px">  
     <input type="text" class="form-control" id="d000" enabled size = "30">  
    </div> 

    <div class="col-md-3" style="padding-top: 10px">  
    <input type="text" class="form-control" id="d001" enabled size ="30" >  
    </div> 
</div> 

<script> 
    $(document).ready(function(){ 
    $("#num").click(function() { 
    $('#form').append("<div class='row'><div class='col-md-3' style='padding top: 10px'><select class=tg-83xr id='year' > </select></div><div class='col-md-3' style='padding-top: 10px'> <input type='text' class='form-control' id='d000'> </div><div class='col-md-3' style='padding-top: 10px'><input type='text' class='form-control' id='d001'></div></div>")});}); 
</script> 

<div id="form"> 
</div> 

<br> 
<button id="num"> ADD </button> To add another click here 

Здесь я не могу добавить опции в списке, который содержит список лет (1900-2016) в функции .append().

Answer 1

Лучше не используйте document.write. Вы можете использовать метод append(), чтобы добавить параметры для выбора.

<select id="year" name="year"> 
    </select> 
<script> 
var myDate = new Date(); 
var year = myDate.getFullYear(); 

for (var i = 1900; i < year + 1; i++) { 
    $("#year").append('<option value="' + i + '">' + i + '</option>'); 
} 
</script> 

Answer 2

var optionsString = ""; 

for(var i = 1900; i <= 2016; i++) // OR for(var i = 1900; i <= new Date().getFullYear(); i++) 
{ 
    optionsString += '<option value="'+i+'">'+i+'</option>'; 
} 

$('#form').append("<div class='row'><div class='col-md-3' style='padding top: 10px'><select class=tg-83xr id='year' >"+optionsString+"</select></div><div class='col-md-3' style='padding-top: 10px'> <input type='text' class='form-control' id='d000'> </div><div class='col-md-3' style='padding-top: 10px'><input type='text' class='form-control' id='d001'></div></div>")});});