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

Question

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

HTML:

<select class="js-example-basic-multiple" name="selectedValues" multiple="multiple" multiple>

  <?=$displaySelectData?>

</select>

记者：

$(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 () {&nbsp; var sample_row = 1;&nbsp; $('#addrow').click(function(e) {&nbsp; &nbsp; e.preventDefault();&nbsp; &nbsp; var new_row = $('#sample_row_template')&nbsp; &nbsp; &nbsp; .clone() // CLONE THE TEMPLATE&nbsp; &nbsp; &nbsp; .attr('id', 'row' + (sample_row++)) // MAKE THE TABLE ROW ID UNIQUE&nbsp; &nbsp; &nbsp; .appendTo($('#sample_table tbody')) // APPEND TO THE TABLE BODY&nbsp; &nbsp; &nbsp; .show() // SHOW IT&nbsp; &nbsp; &nbsp;;&nbsp; &nbsp; &nbsp;// now, initialize select2 *only* on the new row that was created&nbsp; &nbsp; &nbsp;new_row.find('.js-example-basic-multiple').select2();&nbsp; });});