Select2 动态添加的输入不起作用答案

【问题标题】：Select2 dynamically added inputs not workingSelect2 动态添加的输入不起作用
【发布时间】：2020-10-20 15:44:29
【问题描述】：

我有一个使用 Select2 中的多选的表，工作正常。但是，我有一个按钮可以通过克隆前一行并向行添加新 id 来添加行，我对多选使用相同的标记。那个是残疾人。我尝试在添加行后重新初始化但不起作用:(下面是html和js。

HTML：

<select class="js-example-basic-multiple" name="selectedValues" multiple="multiple" multiple>
  <?=$displaySelectData?>
</select>

JS：

$(document).ready(function () {
  $('.js-example-basic-multiple').select2();
  var sample_row = 1;
  $('#addrow').click(function(e) {
    e.preventDefault();
    var sample_row_template = $('#sample_row_template')
      .clone()  // CLONE THE TEMPLATE
      .attr('id', 'row' + (sample_row++)) // MAKE THE ID UNIQUE
      .appendTo($('#sample_table tbody')) // APPEND TO THE TABLE
      .show(); // SHOW IT
  });
            
  $('.js-example-basic-multiple').select2();
});

我正在克隆的行

<tr id="sample_row_template" style="display: none;">
    <td width="200px">
        <input class="form-control" name="sample-reference" type="text" value="">
    </td>
    <td width="150px">
        <input class="form-control" name="sample-date" type="date" value="<?=$today?>" id="example-date-input">
    </td>
    <td width="150px">
        <input class="form-control" name="sample-time" type="time" value="<?=$now?>" id="example-time-input">
    </td>
    <td >
        <select class="js-example-basic-multiple" name="selectedValues" multiple="multiple" multiple>
            <?=$displaySelectData?>
        </select>
    </td>
    <td width="200px">
        <select class="fart form-control">
            <option>Select</option>
            <option value="1">1 Day</option>
            <option value="2">2 Day</option>
            <option value="3">3 Day</option>
            <option value="4">4 Day</option>
            <option value="5">5 Day</option>
            <option value="6">6 Day</option>
            <option value="7">7 Day</option>
            <option value="8">8 Day</option>
            <option value="9">9 Day</option>
            <option value="10" selected>10 Day</option>
        </select>
    </td>
    </div>
</tr>

【问题讨论】：

这需要更多细节/HTML，您至少应该包含#sample_row_template 和您的#sample_table 的HTML 至少一行。
我添加了我正在克隆的行，如果我多次关闭它，多选不起作用

标签： javascript forms jquery-select2

【解决方案1】：

主要问题是克隆行后您没有调用.select2()。如果您仔细观察，您对.select2() 的第二次调用发生在您的.click() 处理程序外部，即使您的空格使它看起来像是在内部。

另一个问题是最好在仅克隆的行上调用.select2()，而不是全局调用。在我的测试中，如果我像你一样保持函数调用，那么在第一个克隆之后克隆的任何行都会显示选择下拉列表和 select2 下拉列表。这段代码应该可以解决问题：

$(document).ready(function () {
  var sample_row = 1;

  $('#addrow').click(function(e) {
    e.preventDefault();
    var new_row = $('#sample_row_template')
      .clone() // CLONE THE TEMPLATE
      .attr('id', 'row' + (sample_row++)) // MAKE THE TABLE ROW ID UNIQUE
      .appendTo($('#sample_table tbody')) // APPEND TO THE TABLE BODY
      .show() // SHOW IT
     ;

     // now, initialize select2 *only* on the new row that was created
     new_row.find('.js-example-basic-multiple').select2();
  });
});

【讨论】：