如何克隆select2 v4 Ajax

我正在尝试使用Select2 ver4 jquery插件进行AJAX调用，并使用加载Select2示例页面的远程数据我试图克隆包含select2工具的选择。 但克隆时禁用了select2下拉列表。

HTML代码

    Add Line   

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 = '
' + '
' + '' + '
' + '
' + '
' + '
' + repo.full_name + '
' + '
 ' + repo.forks_count + '
' + '
 ' + repo.stargazers_count + '
' + '
'; if (repo.description) { markup += '
' + repo.description + '
'; } markup += '
'; 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

创建克隆后，您必须为它运行完全相同的select2参数（除了您已销毁的原始参数）。 您可以将参数声明为全局变量，然后在两个地方使用它（这是更好的做法），或者再次包含它们，为了优化答案，您可以在下面看到：

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