爲

Question

首先，「基於在文本框輸入更改下拉值」多行，非常感謝你對我的支持在：Change Dropdown values based on input in textfield

現在我需要擴展這個功能。

下面是基於文本字段的值更改下拉menue（非常感謝你，利昂·威廉姆斯）代碼： https://jsfiddle.net/q5s24th2/

現在我想添加更多的人，對此我也能進入文本字段值，以便下拉菜單更改其內容。在這裏，我已經創建了一些補充更多的人： https://jsfiddle.net/xsnLc48o/

<p id="maintable">1: 
    <input name="Year1" type="text" value="" /> 
    <select name="Results1"> 
    <option selected="selected" value="">please choose:</option> 
    <option value="300" data-under-18="100" data-over-18="300">300.-</option> 
    <option value="500" data-under-18="200" data-over-18="500">500.-</option> 
    <option value="1000" data-under-18="300" data-over-18="1000">1000.-</option> 
    <option value="1500" data-under-18="400" data-over-18="1500">1500.-</option> 
    <option value="2000" data-under-18="500" data-over-18="2000">2000.-</option> 
    <option value="2500" data-under-18="600" data-over-18="2500">2500.-</option> 
    </select> 

    <input name="Additional1" type="checkbox" title="Option" value="1" />Option 
    </p> 
    <p> 
    <input type="button" value="+ Add Person" id="addRows" /> 
    </p> 

不幸的是，增加人員的下拉功能不起作用（我已經試過幾件事情）。

如果有人有一個想法該怎麼做，我會很高興。 也許比使用addRows/append功能有更好的可能性。

預先感謝您。

最好的問候， 安迪

Answer 1

你可以通過創建一個將克隆您現有的行之一，其追加到內容的功能做到這一點。這可能是最好考慮使用一個表來更輕鬆地組織內容：

<table id="maintable"> 
    <tr class='person-row'> 
     <td class='person-number'>...</td> 
     <td>...</td> 
     <td>...</td> 
     <td>...</td> 
    </tr> 
</table> 

然後調整你的「添加行」功能來克隆第一行，然後保存當前用戶，這樣的數量的計數器你可以它添加到name屬性如預期：

// When you add a new user 
$("#addRows").click(function(){ 
     // Determine the next users number 
     var nextUser = $('.person-row').length + 1; 
     // Clone the first row 
     var nextUserRow = $('#maintable tr:first').clone(); 
     // Update your attributes 
     $(nextUserRow).find('.person-number').text(nextUser + ':'); 
     $(nextUserRow).find('.person-year').attr('name','Year' + nextUser).val(''); 
     $(nextUserRow).find('.person-value').attr('name','Results' + nextUser); 
     $(nextUserRow).find('.person-additional').attr('name','Additional' + nextUser); 
     // Set the defaults for the row 
     $(nextUserRow).find('select option:not(:first)').each(function() { 
      var valueToUse = $(this).attr('data-over-18'); 
      $(this).val(valueToUse).text(valueToUse + '.-'); 
     }); 
     // Append the row 
     $("#maintable").append(nextUserRow); 
}); 

可以see a working example of this in action here及以下證明：