如何克隆select2 v4 Ajax

Question

我正在尝试使用Select2 ver4 jQuery插件和使用加载Select2示例页的远程数据执行AJAX调用 我想克隆包含select2工具的select。 但克隆时禁用了select2下拉菜单。

HTML代码

<tr> 
<td> 
<select class="js-example-data-ajax" id="sel1"> 
</select> 
<button type="button" class="addline">Add Line</button> 
</td> 
</tr> 

jQuery代码

 $.fn.select2.amd.require(
    ["select2/core", "select2/utils", "select2/compat/matcher"], 
    function (Select2, Utils, oldMatcher) { 

    var $ajax = $(".js-example-data-ajax"); 

    function formatRepo (repo) { 
    if (repo.loading) return repo.text; 

    var markup = '<div class="clearfix">' + 
    '<div class="col-sm-1">' + 
    '<img src="' + repo.owner.avatar_url + '" style="max-width: 100%" />' + 
    '</div>' + 
    '<div clas="col-sm-10">' + 
    '<div class="clearfix">' + 
    '<div class="col-sm-6">' + repo.full_name + '</div>' + 
    '<div class="col-sm-3"><i class="fa fa-code-fork"></i> ' + repo.forks_count + '</div>' + 
    '<div class="col-sm-2"><i class="fa fa-star"></i> ' + repo.stargazers_count + '</div>' + 
    '</div>'; 

    if (repo.description) { 
     markup += '<div>' + repo.description + '</div>'; 
    } 

    markup += '</div></div>'; 

    return markup; 
    } 

    function formatRepoSelection (repo) { 
    return repo.full_name || repo.text; 
    } 

    $ajax.select2({ 
    ajax: { 
     url: "https://api.github.com/search/repositories", 
     dataType: 'json', 
     delay: 250, 
     data: function (params) { 
     return { 
      q: params.term // search term 
     }; 
     }, 
     processResults: function (data, params) { 
     // parse the results into the format expected by Select2 
     // since we are using custom formatting functions we do not need to 
     // alter the remote JSON data, except to indicate that infinite 
     // scrolling can be used 
     params.page = params.page || 1; 

     return { 
      results: data 
     }; 
     }, 
     cache: true 
    }, 
    escapeMarkup: function (markup) { return markup; }, 
    minimumInputLength: 1, 
    }); 
}); 

$(document).on('click', '.addline', function() { 
    var $tr = $(this).closest('tr'); 
    var $lastTr = $tr.closest('table').find('tr:last'); 

    $lastTr.find('.js-example-data-ajax').select2('destroy'); 

    var $clone = $lastTr.clone(); 

    $clone.find('td').each(function() { 
     var el = $(this).find(':first-child'); 
     var id = el.attr('id') || null; 
     if (id) { 
      var i = id.substr(id.length - 1); 
      var prefix = id.substr(0, (id.length - 1)); 
      el.attr('id', prefix + (+i + 1)); 
      el.attr('name', prefix + (+i + 1)); 
     } 
    }); 
    $tr.closest('tbody').append($clone); 
    $lastTr.find('.js-example-data-ajax').select2(); 
    $clone.find('.js-example-data-ajax').select2(); 
}); 
$('.js-example-data-ajax').select2(); 

Answer 1

创建克隆后，你必须运行它非常相同的选择2参数（除了你已经破坏了原来的一个）。您可以声明参数作为一个全局变量，然后用它在两个地方（这是更好的做法），或再包括它们，这对于优化答案的缘故，你可以看到如下：

$(document).on('click', '.addline', function() { 
    var $tr = $(this).closest('tr'); 
    var $lastTr = $tr.closest('table').find('tr:last'); 

    $lastTr.find('.js-example-data-ajax').select2('destroy'); 

    var $clone = $lastTr.clone(); 

    $clone.find('td').each(function() { 
     var el = $(this).find(':first-child'); 
     var id = el.attr('id') || null; 
     if (id) { 
      var i = id.substr(id.length - 1); 
      var prefix = id.substr(0, (id.length - 1)); 
      el.attr('id', prefix + (+i + 1)); 
      el.attr('name', prefix + (+i + 1)); 
     } 
    }); 
    $tr.closest('tbody').append($clone); 

    // ADDED: 
    $(".js-example-data-ajax").select2({ 
     ajax: { 
     url: "https://api.github.com/search/repositories", 
     dataType: 'json', 
     delay: 250, 
     data: function (params) { 
      return { 
      q: params.term // search term 
      }; 
     }, 
     processResults: function (data, params) { 
      // parse the results into the format expected by Select2 
      // since we are using custom formatting functions we do not need to 
      // alter the remote JSON data, except to indicate that infinite 
      // scrolling can be used 
      params.page = params.page || 1; 

      return { 
      results: data 
      }; 
     }, 
     cache: true 
     }, 
     escapeMarkup: function (markup) { return markup; }, 
     minimumInputLength: 1, 
    }); 

    // BAD PRACTICE: Make the entire { ajax: ...} block as a global variable, 
    // then use it both here and on your original $ajax.select2(...) call. 

});