Javascript 如何动态初始化select2

我通过AJAX在DOM中插入概念行（带有select和input文本元素）。我想将那些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>

试验
测试2
$（“#概念0”）。选择2（）；

但我认为在AJAX响应中返回javascript和HTML是错误的。还有其他选择吗

---

如果我的问题有点愚蠢，谢谢你，对不起…

我会这样构造流程：

• 将部分选择分组以减少Ajax请求的数量
• 使用“数据-”向部分HTML添加标记
• 使用ajaxget检索部分html
• 初始化元素
• [可选]分离目标父元素-性能原因
• 向目标添加元素
• [可选]重新连接目标元件
• 初始化小部件

我在这里做了一个模拟：

下面是一个小小的解释：

假设您有以下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请求中发送一个计数器（我希望您使用该计数器生成select的

id

），您可以在ajax请求之前将其存储在某个元素或js变量中。因此，在每个ajax请求中，您都具有计数器的唯一值

然后，您可以使用以下命令初始化选择2：

$(document).ajaxComplete(function() {
    $(document).find('your-unique-counter-select-id').select2();
});

---

在这里写下你想要的代码。很抱歉，我会在几分钟内编写它。我会在每个AJAX请求中发送一个计数器，所以这很有效。。。但我认为这不是正确的方法…不，我只想知道如何动态初始化select2。我的方法（在AJAX响应中返回HTML和javascript）看起来很难看…显示您的

AJAX

部分。。

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

$(document).ajaxComplete(function() {
    $(document).find('your-unique-counter-select-id').select2();
});