Javascript 带有动态选项的JQuery动态选择字段

我是JQuery新手，对动态表单有问题。 我想创建一个动态字段，用户可以在其中创建任意数量的字段。不幸的是，在第一个字段之后生成的第二个字段中的选项与包装器中的每个动态字段相关。我怎样才能解决这个问题

提前谢谢你-我将感谢你的每一个回答

<div class='input_fields_wrap'>
<button class='add_field_button'>Add more fields</button>
<div>
    <label for='service'>Usługa</label>
    <select name='service' class='service'>
        <option value='Wybierz' selected>Wybierz</opiton>
        <option value='Listy'>Listy</option>
        <option value='Paczki'>Paczki</option>
    </select>
    <select name='type' class='type'></select>

</div>

添加更多字段
乌加
威比尔兹
倦怠的
帕茨基

$（文档）.ready（函数（）{
变量列表=[
{显示：'A'，值：'A'}，
{显示：'B'，值：'B'}]；
var paczki=[
{显示：'C'，值：'C'}，
{显示：'D'，值：'D'}]；
var max_字段=20；
var wrapper=$（'.input_fields_wrapp'）；
var add_button=$（'.add_field_button'）；
var x=1；
$（添加按钮）。单击（功能（e）{
e、 预防默认值（）；
如果（x更改
$（'.service'）。将（函数（e）{
更改为
$（包装器）。在（'Change'，'.service'，函数（e）{

$（'.service'）.change（函数（e）{
将只侦听当时存在的类。后者，即
.on（）
，侦听包装器，并在
.service
更改时执行

我注意到，在您的代码中，当您更改一种类型时，所有类型都将被替换。您可以通过向
列表
函数添加一个参数来解决此问题。如果需要，只需将
元素
替换为
'。type'

这看起来像这样

  $(wrapper).on('change', '.service', function(e) {
    e.preventDefault();
    var parent = $(this).val();
    switch (parent) {
      case 'Listy':
        list(listy, $(this).next().next());
        break;
      case 'Paczki':
        list(paczki, $(this).next().next());
        break;
      // TODO: add case for Wybierz
    }
  });

  function list(array_list, element) {
    $(element).html("");
    $(array_list).each(function(i) {
      $(element).append("<option value=" + array_list[i].value + ">" + array_list[i].display + "</option>");
    });
  }

$（包装器）.on（'change'，'.service'，函数（e）{
e、 预防默认值（）；
var parent=$（this.val（）；
交换机（父级）{
“利斯蒂”一案：
列表（listy，$（this.next（）.next（））；
打破
“帕茨基”案：
列表（paczki，$（this.next（）.next（））；
打破
//TODO:为Wybierz添加案例
}
});
函数列表（数组列表、元素）{
$（element.html（“”）；
$（数组列表）。每个（函数（i）{
$（元素）.append（“+array\u list[i].display+”）；
});
}

解决方案

$（文档）.ready（函数（）{
变量列表=[
{显示：'A'，值：'A'}，
{显示：'B'，值：'B'}]；
var paczki=[
{显示：'C'，值：'C'}，
{显示：'D'，值：'D'}]；
var max_字段=20；
var wrapper=$（'.input_fields_wrapp'）；
var add_button=$（'.add_field_button'）；
var x=1；
$（添加按钮）。单击（功能（e）{
e、 预防默认值（）；
如果（x“事件委派允许我们将单个事件侦听器附加到父元素，该事件侦听器将为与选择器匹配的所有子体触发，无论这些子体现在存在还是将来添加。参考：

你需要做到以下几点

        $(wrapper).on('change','.service', function(e) {
            e.preventDefault();
            var parent = $(this).val();
            switch(parent){
                case 'Listy':
                    list(listy);
                    break;
                case 'Paczki':
                    list(paczki);
                    break;
            }
        });

您可以共享html吗？您好！谢谢您的帮助，但这已经完成了一半。没错，现在动态选项只显示在“选定”选项中，但许多字段的同时更改被阻止。此外，我无法更改默认创建的第一个字段中的任何内容。@Kleju_0011我不确定您的意思是什么”在许多字段中同时更改”。我已经更新了代码，默认情况下创建了一个按钮，使用示例中的HTML，在HTML中没有默认条目。我通过模拟开始时的单击来创建默认条目
。触发器（'click'）
，就是这样做的。好的，现在我明白了-我没有注意到整个解决方案和触发器。现在正在工作。谢谢！
        $(wrapper).on('change','.service', function(e) {
            e.preventDefault();
            var parent = $(this).val();
            switch(parent){
                case 'Listy':
                    list(listy);
                    break;
                case 'Paczki':
                    list(paczki);
                    break;
            }
        });