ajax 初始化下拉框,如何动态初始化select2

我会像这样构建流程：

将partials分组选择以减少Ajax请求的数量

使用'data - '将标记添加到部分HTML中

使用AJAX GET检索部分html;

初始化元素;

[可选]分离目标父元素 - 性能原因;

将元素附加到目标;

[可选]重新附加目标元素;

初始化小部件。

贝娄有点解释：

因此，假设您有以下HTML：

No.	Name.	Option.
1	abc
2	dce
3	fgh

对partials进行分组选择减少Ajax请求的数量，并使用'data - '将标记添加到部分HTML中

如果您可以像这样分组和编写部分HTML，则无需对每行的Ajax请求执行此操作。您也可以选择限制它们，但这需要对“分页”进行更多编程。

Test

Test 2

Test

Test 2

Test

Test 2

使用AJAX GET检索部分html

我不会透露细节，这足以说明：

$.get(conceptPartialUrl, successCallback);

初始化元素;

var successCallback = function(data){

var $fragmentEl = initEls(data);

// Optionally before appending the selects detach the container;

appendElements($fragmentEl, $containerEl);

// Initialize the widgets.

initSelect2Widgets();

};

var initEls = function(data){

// Create DOM elements - JQuery Way

var $fragmentEl = $(data);

// Return the reference

return $fragmentEl;

};

将元素附加到目标;

var appendElements = function($fragmentEl, $containerEl){

var $rows = $containerEl.find('tr');

$fragmentEl.each(function(){

var $el = $(this);

// some matching - you

var idx = $el.data('row-idx');

// that plus 1 is to skip the header

// find the row

var $row = $rows.eq(idx+1);

// find the cell, empty it and append the element

$row .find('td').last().text('').append($el);

});

};

初始化小部件

var initSelect2Widgets = function(){

$containerEl.find('[data-widget="select2"]').select2();

};