如何动态初始化select2
How to initialize select2 dynamically
我在 DOM 到 AJAX 中插入概念行(使用 select 和输入文本元素)。我想将那些 select 初始化为 select2: 但我不知道正确的方法。
- 我应该在每一行写上 javascript 吗? (通过 AJAX 插入 html 和 JS)
我在每个 AJAX 请求中得到这个:
<select id="concept0">
<option value="Test"> Test </option>
<option value="Test2"> Test 2 </option>
</select>
<script> $("#concept0").select2(); </script>
但我认为 return javascript 和 AJAX 回复中的 HTML 是错误的想法。还有其他选择吗?
谢谢,对不起,如果我的问题有点愚蠢...
我会像这样构建流程:
- 对部分选择进行分组以减少 Ajax 请求的数量
- 使用 'data-'
向部分 HTML 添加标记
- 使用 AJAX GET 检索部分 html;
- 初始化元素;
- [可选]分离目标父元素 - 性能原因;
- 将元素附加到目标;
- [可选]重新附加目标元素;
- 初始化小部件。
我在这里做了一个模拟:http://jsbin.com/jotitu/edit?js,output
下面稍微解释一下:
所以假设你有以下 HTML:
<div id="concept-table-container">
<table>
<tr>
<th>
No.
</th>
<th>
Name.
</th>
<th>
Option.
</th>
</tr>
<tr>
<td>1</td>
<td>abc</td>
<td></td>
</tr>
<tr>
<td>2</td>
<td>dce</td>
<td></td>
</tr>
<tr>
<td>3</td>
<td>fgh</td>
<td></td>
</tr>
</table>
</div>
将部分选择分组以减少 Ajax 请求的数量,并使用 'data-'
向部分 HTML 添加标记
如果您可以像这样分组和编写您的部分 HTML,您将不需要对每一行的 Ajax 请求进行操作。您也可以选择限制它们,但这需要对 "pagination".
进行更多编程
<select data-widget="select2" data-row-idx="0">
<option value="Test"> Test </option>
<option value="Test2"> Test 2 </option>
</select>
<select data-widget="select2" data-row-idx="1">
<option value="Test"> Test </option>
<option value="Test2"> Test 2 </option>
</select>
<select data-widget="select2" data-row-idx="2">
<option value="Test"> Test </option>
<option value="Test2"> Test 2 </option>
</select>
使用 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();
};
我有另一种解决方法:
正如您在评论中所说,您在每个 ajax 请求中发送一个计数器(我希望您正在使用该计数器生成 id
of select),您可以在 ajax 请求之前将其存储在某个元素或 js 变量中。因此,在每个 ajax 请求中,您都有计数器的唯一值。
然后你可以使用 :
初始化你 select2
$(document).ajaxComplete(function() {
$(document).find('your-unique-counter-select-id').select2();
});
我在 DOM 到 AJAX 中插入概念行(使用 select 和输入文本元素)。我想将那些 select 初始化为 select2: 但我不知道正确的方法。
- 我应该在每一行写上 javascript 吗? (通过 AJAX 插入 html 和 JS)
我在每个 AJAX 请求中得到这个:
<select id="concept0">
<option value="Test"> Test </option>
<option value="Test2"> Test 2 </option>
</select>
<script> $("#concept0").select2(); </script>
但我认为 return javascript 和 AJAX 回复中的 HTML 是错误的想法。还有其他选择吗?
谢谢,对不起,如果我的问题有点愚蠢...
我会像这样构建流程:
- 对部分选择进行分组以减少 Ajax 请求的数量
- 使用 'data-' 向部分 HTML 添加标记
- 使用 AJAX GET 检索部分 html;
- 初始化元素;
- [可选]分离目标父元素 - 性能原因;
- 将元素附加到目标;
- [可选]重新附加目标元素;
- 初始化小部件。
我在这里做了一个模拟:http://jsbin.com/jotitu/edit?js,output
下面稍微解释一下:
所以假设你有以下 HTML:
<div id="concept-table-container">
<table>
<tr>
<th>
No.
</th>
<th>
Name.
</th>
<th>
Option.
</th>
</tr>
<tr>
<td>1</td>
<td>abc</td>
<td></td>
</tr>
<tr>
<td>2</td>
<td>dce</td>
<td></td>
</tr>
<tr>
<td>3</td>
<td>fgh</td>
<td></td>
</tr>
</table>
</div>
将部分选择分组以减少 Ajax 请求的数量,并使用 'data-'
向部分 HTML 添加标记如果您可以像这样分组和编写您的部分 HTML,您将不需要对每一行的 Ajax 请求进行操作。您也可以选择限制它们,但这需要对 "pagination".
进行更多编程<select data-widget="select2" data-row-idx="0">
<option value="Test"> Test </option>
<option value="Test2"> Test 2 </option>
</select>
<select data-widget="select2" data-row-idx="1">
<option value="Test"> Test </option>
<option value="Test2"> Test 2 </option>
</select>
<select data-widget="select2" data-row-idx="2">
<option value="Test"> Test </option>
<option value="Test2"> Test 2 </option>
</select>
使用 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();
};
我有另一种解决方法:
正如您在评论中所说,您在每个 ajax 请求中发送一个计数器(我希望您正在使用该计数器生成 id
of select),您可以在 ajax 请求之前将其存储在某个元素或 js 变量中。因此,在每个 ajax 请求中,您都有计数器的唯一值。
然后你可以使用 :
初始化你 select2$(document).ajaxComplete(function() {
$(document).find('your-unique-counter-select-id').select2();
});