jQuery表单中继器和select2不一起工作 [英] jQuery form repeater and select2 dont work together

问题描述

我使用的是Select2和jQuery表单转发器（ https://github.com/DubFriend/jquery。中继器）

我已经在谷歌/搜索了2天，但似乎无法让它工作。

  include jquery / select2.js / jquery.repeater.js 
 
 var 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标签，其中input和select元素是select2已经初始化并且已经改变了DOM，所以jQuery.repeater复制了更改后的DOM。我试图在重复动作被调用之前销毁select2，但是dindt也可以工作。

解决方案

我是新来的SO，而是一个长期的读者。我正在开发一个项目，我使用jQuery.repeater重复多个select2输入。

  $（'。job_repeater'）。repeater（ {
 show：function（）{
 $（this）.slideDown（）; 
'（'。select2-container'）。remove（）; 
 $（'Replace （{
 placeholder：Placeholder text，
 allowClear：true 
}）; 
 $（'。select2 （'确认问题'））{
}，
 hide：function（remove）{
 if b $ b $（this）.slideUp（remove）; 
} 
} 
}）; 
  

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

初始化select2以调整父div /容器的宽度后，始终使用CSS线。

/ p>

I am using Select2 and jQuery form repeater (https://github.com/DubFriend/jquery.repeater)

I have searched on google/so for 2 days, but cant seem to get it to work.

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

The problem is the jQuery.repeater clones the div tag in which the input and select elements are when select2 is already initialized and has already changed the DOM, so jQuery.repeater copies the changed DOM. I tried to destroy select2 before the repeat action is called, but that dindt work either.

解决方案

I'm new to SO, but a long-time reader. I'm working on a project where I use jQuery.repeater to repeat multiple select2 inputs. Following approach helped to solve my problem of initializing the inputs after they are loaded.

$('.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);
    }
  }
});

More exact jQuery selectors will help to only remove/initialize the selects you want to.

The CSS line I use always after initializing the select2 to adjust the width to the parent div/container.

Best regards

这篇关于jQuery表单中继器和select2不一起工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！