jQuery形式中继器和Select2不一起工作

我正在使用select2和jquery form repeater（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克隆的DIV标签，其中输入和选择元素是Select2已经初始化并已经更改DOM时的DIV标签，因此JQuery.Repeater复制了更改的DOM。我试图在调用重复动作之前销毁select2，但dindt也起作用。

我正在从事一个项目，在该项目中，我使用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的宽度。

最好的问候

这是一个解决方案，可以在" repeater"按钮时钟初始化select2。

<script type="text/javascript">
 
    $("p").mouseover(function(){
        setTimeout(function(){
 
            $(".select2").select2({
                placeholder: "Select a state",
                allowClear: true
            }); 
                  
        }, 100);
    }); 
 
</script>

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

form.repeater({
  show: function() {
    $(this).slideDown(); 
    $(this).find('select').each(function() {
      if (typeof $(this).attr('id') === "undefined") {
        // ...
      } else {
        $('.select2').removeAttr("id").removeAttr("data-select2-id"); //some times id was not unique So select2 not working, so i remove id 
        $('.select2').select2();
        $('.select2-container').css('width','100%');
        $('.select2').next().next().remove();
      }
    });
  }
});

尝试此

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

主要是在初始化转发器之前初始化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
        })
    });

使用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();
    },
});

i通过首先在文档上的原始select2初始化了$ 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);
            }
        }
    });

希望这还为时不晚，这在我的尽头。必须手动"销毁" 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
    });
}

如果其他人偶然发现了这一点，我也有同样的问题使它起作用，而解决方案正在破坏 select2 并重新创建。

i然后出现了一个问题，即打开时 select2 不会位于正确的位置。例如，进行重复以在页面滚动中导致任何 select2 在页面滚动之后的任何 select2 ，然后在第一个位置打开。

要解决此问题（让 select2 打开应（在页面下方）），将 dropdownparent 设置为其直系亲属，为此：

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

如果您的表单内有任何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);
    }
});

，所以我遇到了同样的问题，并在" 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);
        },
    });

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

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

只是在这里添加我的两个美分的解决方案。

1-我在中继器中创建新元素的按钮中添加了一个ID：id="repeater-button"

<form id="attributes_repeater">
    <!--begin::Form group-->
    <div class="form-group">
        <div data-repeater-list="attributes_repeater">
            <div class="form-group row">
                <div class="col-md-10 px-0 ps-3">
                    <select name="attribute" class="form-select select2-attribute fs-base fw-normal py-1" data-control="select2">
                        <option></option>
                        <option value="1">Option1</option>
                        <option value="2">Option2</option>
                    </select>
                </div>
                <div class="col-md-2 px-0 px-1">
                    <a href="javascript:;" data-repeater-delete class="btn btn-sm btn-light-danger mt-1 py-1 px-2">
                        <i class="la la-trash-o"></i>
                    </a>
                </div>
            </div>
        </div>
    </div>
    <!--end::Form group-->
    <!--begin::Form group-->
    <div class="form-group mt-5">
        <a href="javascript:;" data-repeater-create class="btn btn-light-primary" id="repeater-button">
            <i class="la la-plus"></i>Add
        </a>
    </div>
    <!--end::Form group-->
</form>

2-然后，我在中继器的ready方法中添加了Select2组件的初始化。只是要确保第一个组件是第一次初始化的。

$('#attributes_repeater').repeater({
    initEmpty: false,
    isFirstItemUndeletable: true,
    ready: function () {
        $( document ).ready(function() {
            $(".select2-attribute").select2({
                placeholder: "Select..."
            });
        });
    },
    show: function () {
        $(this).slideDown();
    },
    hide: function (deleteElement) {
        $(this).slideUp(deleteElement);
    }
});

3-然后，我们为中继器的添加按钮创建了ONCLICK方法（我们在第一步中创建ID的方法）。这将确保我们初始化所有新的创建元素。请注意，我们正在等待100毫秒。只是为了确保我们执行脚本时已经创建了新组件。

$("#repeater-button").click(function(){
    setTimeout(function(){
        $(".select2-attribute").select2({
            placeholder: "Select..."
        });
    }, 100);
});

如果ID不是唯一的Select2可能不起作用，请删除然后删除从上一个元素复制的Select2容器。最后，重新启动select2

$('.repeater').repeater({
    isFirstItemUndeletable: true,
    initEmpty: false,
    show: function () {
        $(this).slideDown();
        $('.select2').removeAttr("id").removeAttr("data-select2-id");
        $(this).find('.select2-container').remove();
        $(this).find('.select2').select2()
    },
    hide: function (removeEle) {
        if(confirm('Sure?')) {
            $(this).slideUp(removeEle);
        }
    },
});

相关内容

最新更新

热门标签：