名單列表選項列表保持乘法運算

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