名单列表选项列表保持乘法运算

Question

function addteamSection() { 
    var teamList = $('#team_table'); 
    var team_temp = ''; 
    var size_temp = ["20", "30", "40", "50", "60"]; 

    teamList.append("<tr><td><input class='name' type='text' name='player_name' /></td><td><input class='number' type='text' name='player_number' /></td><td><select class='sizeList'></select></td></tr>"); 

    for (var s = 0; s < size_temp.length; s++) { 
     var sizeList = $('.sizeList'); 
     team_temp += "<option value=" + size_temp[s] + ">" + size_temp[s] + "</option>"; 
    } 

    sizeList.append(team_temp); 

} 

我的意图是通过点击按钮创建一个添加名单，它将有年龄选择供用户选择，但我的选项保持乘法，因为我有相同的类名，但我想如何添加选择不使用任何ID，并确保它不是繁殖。

Demo

不断点击几个时间添加和检查的第一个选项，它重复。

Answer 1

分开你的字符串建设像这样。

Working fiddle。

function addteamSection(){ 
     var teamList = $('#team_table'); 
     var team_temp = ''; 
     var size_temp = ["20", "30", "40", "50","60"]; 

     var rowString = "<tr><td><input class='name' type='text' name='player_name' /></td><td><input class='number' type='text' name='player_number' /></td><td>" 
     var selectString = "<select class='sizeList'>" 

     /* Instead of using var sizeList = $('.sizeList'); to select the new dropdown 
      (which won't work anyway because your new element hasn't been added to the 
      DOM yet.) You can manually build the select box, append the options to it 
      and then append it to your DOM element.*/ 

     for(var s = 0; s < size_temp.length; s++){ 

      selectString += "<option value="+size_temp[s]+">"+size_temp[s]+"</option>"; 
     } 

    selectString+="</select></td></tr>"; 
    rowString+=selectString; 
    teamList.append(rowString); 


    } 
addteamSection(); 

$('#addf').click(function() { 
    addteamSection(); 
});