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

正在创建一个＆＃39; form-repaet＆＃39; div但选择框不起作用。克隆后我尝试select2();，但它无效。任何帮助，将不胜感激。非常感谢！

Answer 1

这是一个有效的jsFiddle

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

在未使用的元素上调用select2（＆＃39; destroy＆＃39;）方法

在我的情况下，这是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中追加时，多个克隆无法正常工作

2 个答案: