多行用于“基于文本字段中的输入来更改下拉值" [英] Multiple Lines for "Change Dropdown values based on input in textfield"

问题描述

首先，非常感谢您对我的支持:根据文本字段中的输入更改下拉列表值

First of all, thank you very much for supporting me in: Change Dropdown values based on input in textfield

现在我需要扩展此功能.

Now I need to extend this feature.

以下是用于基于文本字段值更改下拉菜单的代码(非常感谢Rion Williams): https://jsfiddle.net/q5s24th2/

Here is the code for changing the drop down menue based on a text field value (Thank you very much, Rion Williams): https://jsfiddle.net/q5s24th2/

现在，我想添加更多的人，也可以为其输入文本字段值，以便下拉菜单更改其内容.在这里，我创建了一些东西来增加更多的人: https://jsfiddle.net/xsnLc48o/

Now I would like to add more persons for which I can also enter the textfield value so that the drop down menu changes its content. Here I have created something to add more people: 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>

不幸的是，对于添加的人，下拉功能不起作用(我已经尝试了几件事).

Unfortunately for the added persons the drop down feature does not work (I have tried several things).

如果有人有一个想法，我会很高兴. 也许比使用addRows/append功能要好得多.

If anybody has an idea how to do it, I would be very happy. Maybe there is a much better possibility than using the addRows/append feature.

先谢谢您.

最诚挚的问候， 安迪

推荐答案

您可以通过创建一个函数来完成此操作，该函数将克隆您现有的行之一并将其附加到内容中.最好考虑使用表格来更轻松地组织您的内容:

You could accomplish this by creating a function that would clone one of your existing rows and append it to content. It may be best to consider using a table to more easily organize your content :

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

然后调整添加行"功能以克隆第一行，然后存储当前用户数量的计数器，以便可以按预期将其附加到name属性:

And then adjusting your "add rows" function to clone the first row and then store a counter of the number of current users so that you can append that to the name attribute as expected :

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

您可以在此处查看此操作示例并进行演示下方:

这篇关于多行用于“基于文本字段中的输入来更改下拉值"的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！