2

我正在使用 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 也可以工作。

4

11 回答 11

13

我正在开发一个使用 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 以调整父 div/容器的宽度后，我总是使用 CSS 行。

此致

于 2016-12-28T09:21:11.457 回答
1

主要的是 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
        })
    });

于 2020-02-19T06:48:49.230 回答
1

尝试这个

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);
    }
});
于 2016-12-28T05:27:44.553 回答
1

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

<script type="text/javascript">

 

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

        setTimeout(function(){

 

            $(".select2").select2({

                placeholder: "Select a state",

                allowClear: true

            }); 

                  

        }, 100);

    }); 

 

</script>

有关问题和解决方案的深入概述，请参见此处

于 2017-12-10T04:59:46.510 回答
0

所以我遇到了同样的问题，并在“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);
        },
    });
于 2021-07-29T12:12:12.057 回答
0

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

var form = $('#form');
form.find('select').select2();
    
$('#repeater-button').click(function (){
 form.repeater();
 form.find('select').select2();
})
于 2021-08-16T18:16:17.437 回答
0

使用该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();
    },
});
于 2017-11-02T21:14:00.640 回答
0

如果您在表单内的转发器之外有任何 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);
    }
});
于 2020-01-07T04:27:36.353 回答
0

我通过首先在准备好文档时初始化原始 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);
            }
        }
    });
于 2018-04-10T14:27:34.460 回答
0

希望这还不算晚，这对我有用。必须手动“销毁”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
    });
}
于 2018-11-06T16:28:58.860 回答
0

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

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

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

currentSelect2.select2({
    placeholder: "Select...",
    width: '100%', 
    allowClear: true,
    dropdownParent: $(this).parent()
});
于 2018-11-11T20:35:12.227 回答