Question

我在bootstrap form-group中使用select2，其中包含一个datepicker和一个select2。当我克隆表单组时只有datepicker可以工作，select2根本无法工作。

我几乎尝试了stackoverflow上的所有答案，每次尝试时都会显示不同的错误，例如“样式错误”，“事件无法正常工作” ，“点击克隆的select2但响应原点select2”。

我的代码如下：

HTML code：

    <div class="form-group drive-item">
      <label class="col-md-2 col-sm-3 col-xs-12 control-label">试驾时间: </label>
      <fieldset>
        <div class="control-group">
          <div class="controls">
            <div class="col-md-3 has-feedback">
              <input type="text" class="form-control has-feedback-left drive-date" name="drive_date" placeholder="试驾日期" aria-describedby="inputSuccess2Status">
              <span class="fa fa-calendar-o form-control-feedback left" aria-hidden="true"></span>
              <span id="inputSuccess2Status" class="sr-only">(success)</span>
            </div>
            <div class="col-md-4 col-sm-6 col-xs-12">
              <select class="select2_one form-control select2-gentlla" tabindex="-1" name="drive_time" multiple="multiple">
                <option value=""></option>
                <foreach name="hour_list" item="hour">
                  <option value="{$hour}">{$hour}</option>
                </foreach>
              </select>
            </div>
          </div>
        </div>
        <span aria-hidden="true" class="glyphicon glyphicon-plus glyphicon-margin"></span>
      </fieldset>
  </div>

JS代码：

$('.drive-item').on('click', '.glyphicon-plus', function(){
  $form_group = $(this).parent().parent();
  $clone = $form_group.clone();

  $datepicker = $clone.find('.drive-date');
  $datepicker.daterangepicker('destroy');
  $datepicker.removeAttr('id');
  $datepicker.daterangepicker(datepicker_option);

  $select2_origin = $form_group.find('.select2_one');
  $select2_origin.select2('destroy');

  $select2_clone = $select2_origin.clone();
  console.log($select2_origin);
  console.log($select2_clone);

  $form_group.after($clone);

  $select2_origin.select2();
  $select2_clone.select2();

});

任何帮助/建议都会很明显。

我在阅读完这个帖子后解决了这个问题：
Select2 clone is working only twice

Answer 1

您制作的克隆与原始克隆具有完全相同的标记。所以在它上面调用.select2（）不知道哪一个要初始化并且会出错。

使用

$('select').select2();

这将初始化页面上<select>的所有实例

Clonned Select2没有响应

1 个答案: