在 select 2 中追加时，多个克隆不起作用

Question

谁能告诉我以下代码有什么问题： HTML

<div class="form-wrapper">
         <div class="form-repaet">
          <div class="form-group">
            <select id="selecttag" name="book[0].tag" class="form-control select2 input-lg" style="width: 100%;">
              <option selected="selected">Tag</option>
              <option>1</option>
              <option>2</option>
            </select>
          </div>
          <div class="form-group">
            <select class="form-control select2" name="book[0].is" style="width: 100%;">
              <option selected="selected">is</option>
              <option>1</option>
              <option>2</option>
            </select>
          </div>
          <div class="form-group">
            <select class="form-control select2 test1" name="book[0].select_tag" style="width: 100%;">
              <option selected="selected">Select a Tag</option>
              <option>1</option>
              <option>2</option>
            </select>
          </div>

          <div class="form-group">
           <div class="btn-group m-r"> 
             <button data-toggle="dropdown" class="btn btn-default dropdown-toggle"> 
              <span class="dropdown-label"><i class="ion-gear-b"></i></span> 
             </button> 
             <ul class="dropdown-menu dropdown-select"> 
              <li class="active">
               <a href="#">All</a>
              </li> 
              <li><a href="#">Option2</a></li> 
              <li><a href="#">Option3</a></li>  
             </ul> 
            </div>
          </div>
          <div class="clearfix"></div>
          <div class="line line-dashed line-lg pull-in"></div>
       </div>

JavaScript 我正在为 javascript

使用以下代码

$(document).ready(function(){
    var counter = 1;
    $("#add-form").click(function () {
        if(counter>10){
                alert("Only 10 textboxes allow");
                return false;
        }
        $(".form-repaet:last").clone().appendTo(".form-wrapper");
        //$(".form-repaet:last").select2();
        counter++;
    });

     $("#removebtn").click(function () {
      if(counter==1){
          return false;
       }
        $(".form-repaet").last().remove();
        counter--;
     });
  });

它正在创建 'form-repaet' div 的克隆，但 select 框不工作。我在克隆后尝试了 select2();，但它不起作用。任何帮助，将不胜感激。非常感谢！

Answer 1

这是一个有效的 jsFiddle

首先，将另一个选择器添加到 select2 元素，而不是 select2，因为它附加到 spans selec2 创建的元素。这就是您收到该错误的原因：

The select2('destroy') method was called on an element that is not using

在我的例子中是 xxx

并像这样使用：

$(".form-repaet:last").find('.xxx').select2('destroy');
var clone = $(".form-repaet:last").clone();
$('.form-wrapper').append(clone);
$('.xxx').select2();

我不关心删除。

注意

在 HTML 中，所有 ID 都应该是唯一的，所以在克隆时要注意它。

Answer 2

这对我有用：

代码前：

addRecord($(this).closest('.glacc-detail'));

更改代码后：

$('.select2bs4').select2('destroy');  //added this line
addRecord($(this).closest('.glacc-detail'));
$('.select2bs4').select2();      //added this line

在 select 2 中追加时，多个克隆不起作用

multiple clone not working when append in select 2

javascript

select2