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

【问题标题】：jQuery form repeater and select2 dont work togetherjQuery 表单转发器和 select2 不能一起工作
【发布时间】：2016-12-21 05:41:52
【问题描述】：

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

我在 google/so 上搜索了 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 在 select2 已经初始化并且已经改变了 DOM 时克隆了 input 和 select 元素所在的 div 标签，所以 jQuery.repeater 复制了改变的 DOM。我试图在调用重复操作之前销毁 select2，但是那个 dindt 也可以工作。

【问题讨论】：

尝试使用ready: function () { } 回调而不是show
已经试过了，没有成功

标签： jquery forms jquery-select2 repeater jquery.repeater

【解决方案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/container 的宽度。

最好的问候

【讨论】：

伟大的工作。只需删除 select2-container 并重新初始化 select2()。
我使用此代码，但单击按钮添加后我的选项在 select2 中删除，我删除了 alowClear。但它不起作用。我不想删除选项。如何维护它们？
非常感谢您！节省我 24 小时的时间来找出我的代码中的错误！
$('.select2-container').remove();不要删除 select2 完成。所以我也使用了 $("select").removeAttr("data-select2-id") 并再次将 select2 应用于所有选择。

【解决方案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);
    }
});

【讨论】：

【解决方案3】：

这是一个在表单转发器按钮时钟上初始化 select2 的解决方案。

<script type="text/javascript">

 

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

        setTimeout(function(){

 

            $(".select2").select2({

                placeholder: "Select a state",

                allowClear: true

            }); 

                  

        }, 100);

    }); 

 

</script>

有关问题和解决方案的深入概述see here

【讨论】：

【解决方案4】：

主要是select2在repeater初始化之前被初始化，

由于转发器更改了所有类型的输入字段的名称，因此在转发器初始化后 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
        })
    });

【讨论】：

在所有给出的解决方案中，这对我来说效果最好。

【解决方案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();
    },
});

【讨论】：

【解决方案6】：

我解决了这个问题，首先在文档就绪时初始化原始 select2，然后在转发器显示方法上使用 $this 定位重复的 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);
            }
        }
    });

【讨论】：

【解决方案7】：

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

$('.repeater').repeater({
    show: function (){
        $(this).slideDown(function(){
            var selects = $('body').find('.pm-select2');
            $.each(selects, function(i, selectElement){
                $(selectElement).removeClass('select2-hidden-accessible').next('.select2-container').remove();
                $(selectElement).removeAttr('data-select2-id tabindex aria-hidden');
                initSelect2(selectElement);
            });
        });
    },
    hide: function (){
        $(this).slideUp();
    },
    isFirstItemUndeletable: true
});

function initSelect2(selectElement) {
    $(selectElement).select2({
        minimumResultsForSearch: Infinity
    });
}

【讨论】：

【解决方案8】：

如果其他人偶然发现这一点，我在让它工作时遇到了同样的问题，解决方案是破坏 select2 并重新创建。

然后我遇到了 select2 在打开时不会位于正确位置的问题。例如，重复导致页面滚动会导致页面滚动后的任何 select2 然后在第一个位置打开。

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

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

【讨论】：

【解决方案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);
    }
});

【讨论】：

【解决方案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);
        },
    });

【讨论】：

欢迎来到 Stack Overflow！请花点时间阅读editing help 中的help center。 Stack Overflow 上的格式与其他网站不同。

【解决方案11】：

请试试这个。首先，选择中继器按钮事件。

var form = $('#form');
form.find('select').select2();
    
$('#repeater-button').click(function (){
 form.repeater();
 form.find('select').select2();
})

【讨论】：