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

Question

我有一个 table 使用来自 Select2 的 multiselect，工作正常。但是我有一个按钮可以通过克隆前一个并向该行添加一个新的 id 来添加一行，我对 multi-select 使用相同的相同标记。那个是残疾人。我尝试在添加行后重新初始化但不起作用:( 下面是 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>

Answer 1

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

另一个问题是最好在 上调用 .select2() 只是 克隆的行，而不是全局调用。在我的测试中，如果我像您一样保持函数调用，那么在第一行结束后克隆的任何行都会显示彼此相邻的 select 下拉列表和 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();
  });
});

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

Select2 dynamically added inputs not working

javascript

forms

jquery-select2