Question

我正在使用Select2和jQuery表单转发器（https://github.com/DubFriend/jquery.repeater）

我在google /上搜索了2天，但似乎无法让它工作。

include jquery/select2.js/jquery.repeater.js

var form = $('#form');
form.find('select').select2();

form.repeater({
    show: function () {
    $(this).show(function(){
        form.find('select').select2('destroy').select2();
    });
    },
    hide: function (remove) {
      $(this).hide(remove);
    }
});

问题是jQuery.repeater克隆了div标签，当select2已经初始化并且已经更改了DOM时，输入和选择元素就在其中，因此jQuery.repeater会复制更改的DOM。我试图在调用重复操作之前销毁select2，但是dindt也可以工作。

Answer 1

我正在开发一个项目，我使用jQuery.repeater重复多个select2输入。以下方法有助于解决我在加载后初始化输入的问题。

$('.job_repeater').repeater({
  show: function () {
    $(this).slideDown();
    $('.select2-container').remove();
    $('Replace with your select identifier id,class,etc.').select2({
      placeholder: "Placeholder text",
      allowClear: true
    });
    $('.select2-container').css('width','100%');
  },
  hide: function (remove) {
    if(confirm('Confirm Question')) {
      $(this).slideUp(remove);
    }
  }
});

更精确的jQuery选择器将有助于仅删除/初始化您想要的选择。

初始化select2后我总是使用的CSS行将宽度调整为父div /容器。

祝你好运

Answer 2

试试这个

include jquery/select2.js/jquery.repeater.js

var form = $('#form');
form.find('select').select2();

form.repeater({
    show: function () {
    $(this).show(function(){
        // you have not really created this second one
        // so the destroy does not work.
        // Since it is just a copy of the html,
        form.find('select').next('.select2-container').remove();
        form.find('select').select2();
    });
    },
    hide: function (remove) {
      $(this).hide(remove);
    }
});

Answer 3

这是一个在表格中继器按钮时钟初始化select2的解决方案。

<script type="text/javascript">

 

    $("p").mouseover(function(){

        setTimeout(function(){

 

            $(".select2").select2({

                placeholder: "Select a state",

                allowClear: true

            }); 

                  

        }, 100);

    }); 

 

</script>

有关问题和解决方案see here

的深入概述

Answer 4

最主要的是在初始化中继器之前要初始化select2，

由于中继器更改了所有类型的输入字段的名称，因此在中继器初始化后，select2找不到正确的引用，因此将其弄乱了。

因此，一旦中继器准备就绪，我们需要初始化select2。这是下面的代码：

 $(document).ready(function () {
        $('.repeater').repeater({
            initEmpty: false, // it also could be true
            show: function () {
				$(this).slideDown(function(){
					$(this).find('.select2').select2({
						placeholder: 'Select an option'
					});
				});
            },
            
            hide: function (deleteElement) {
                $(this).slideUp(deleteElement);
            },
            
            ready: function (setIndexes) {
               $('.select2').select2({
					placeholder: 'Select an option'
				});
            },
            isFirstItemUndeletable: false
        })
    });

Answer 5

使用initEmpty: false选项时，在show函数中初始化select2并不适用于第一行。在这种情况下，您还可以在ready函数运行时初始化select2。

$('.repeater').repeater({
    isFirstItemUndeletable: false,
    initEmpty: false,
    ready: function () {
        $('.select2').select2({
            placeholder: "Select an option...",
        });
    },
    show: function () {
        $(this).slideDown();
        $('.select2').select2({
            placeholder: "Select an option...",
        });
    },
    hide: function () {
        $(this).slideUp();
    },
});

Answer 6

我通过首先在文档就绪上初始化原始select2，然后使用$ this在repeater show方法上重复selected2元素的每个实例进行目标来解决它。例如，如果您有一个简单的选择下拉列表和多个选择，您的代码应如下所示：

$(document).ready(function () {
  $(".select2").select2({
       placeholder: "Select a state",
       allowClear: true
    });
});

$('.repeater').repeater({

        show: function () {
            $(this).slideDown();
            $(this).find('.select2-multiple').select2({

                placeholder: "Select Title",

                allowClear: true,

            });
            $(this).find('.select2').select2({

                placeholder: "Select Title",

                allowClear: true,

            });


        },
        hide: function (deleteElement) {
            if (confirm('Are you sure you want to delete this element?')) {
                $(this).slideUp(deleteElement);
            }
        }
    });

Answer 7

希望这还不算太晚，这对我有帮助。必须手动“销毁” select2并删除所有选择元素的所有附加属性，以免混淆脚本并使该元素返回其“原始”状态。

:/home/yij8/Documents/notchange/models

Answer 8

如果其他人偶然发现了这个问题，我在使它工作方面也遇到了同样的问题，解决方案是销毁 select2 并重新创建。

然后我遇到一个问题，当 select2 打开时，它不会处于正确的位置。例如，执行重复导致页面滚动，则导致页面滚动后的所有 select2 都在第一个位置打开。

要解决此问题（在 select2 应该打开的位置（在页面下方）打开），请将 dropdownParent 设置为其直接父级，如下所示：

currentSelect2.select2({
    placeholder: "Select...",
    width: '100%', 
    allowClear: true,
    dropdownParent: $(this).parent()
});

Answer 9

如果您在表单中的转发器之外有任何select2字段，则以上所有示例均不起作用。因为删除脚本是从表单而不是新创建的实例中选择的。试试这个

var form = $('#form');
form.find('select').select2();

form.repeater({
    show: function () {
        $(this).show(function(){
            $(this).find('.select2-container').remove(); // bind $(this) so if you have more select2 field outside repeater then it doesnt removed
            form.select2();
        });
    },
    hide: function (remove) {
      $(this).hide(remove);
    }
});

Answer 10

所以我遇到了同样的问题并在“2SHAE”答案的帮助下解决了它，但是如果您在转发器之外的页面中的某处使用另一个 select2，它也会被删除，使用：$(this).find(".select2-container").remove();
您可以防止这种情况发生，因此代码应如下所示

$(".invoice-repeater, .repeater-default").repeater({
        show: function() {
            $(this).slideDown(),

                $(this).find(".select2-container").remove();
            $('your identifier').select2({
                placeholder: "placeholder text",
                allowClear: true
            });
            $('.select2-container').css('width', '100%');

        },
        hide: function(e) {
            // snb('error', 'Data deleted', 'Deleted');
            $(this).slideUp(e);
        },
    });

jQuery表单转发器和select2不能一起工作

10 个答案: