Select2在onchange值返回后无法工作

Question

我会根据另一个选择框生成select2下拉框.当第一次发生更改时，它工作得很好，它生成了select2下拉框，但是当我将更多的时间发生在更改函数上时，select2下拉框就不能工作了。

这是我的代码：

 <div class="col-sm-8">
            <select  class="question form-control search-select" name="question_id">
                <option value="">Please choice a question </option>
                @if(!empty($questions) && count($questions) > 0)
                    @foreach($questions as $question)
                        <option value="{{ $question->id }}" data-page-number="{{$question->question_page_no}}">{{$question->question_title}}</option>
                    @endforeach
                @else
                    <option value="">Data not found.</option>
                @endif
            </select>
        </div>

 <div class="form-group">
        <label class="col-sm-3 control-label" for="form-field-1">
            <strong>Answer</strong>
        </label>
        <div class="col-sm-8">
            <select id="answer" multiple="multiple" class="question-value answer-select" name="question_value">
            </select>
        </div>
    </div>

jQuery:

$.ajax({
  type:"GET",
  url:site_url + '/admin/question/value/ajax/'+question_id,
  success: function (data) {
    $('.question-value').html(data);
    generateSelect2();
  },
});
function generateSelect2() {
  if($('.answer-select').length) {
    $('.answer-select').select2({
      allowClear: true,
      width: '100%',
      placeholder: "Please choice answer(s)"
    });
  }
}

Answer 1

您应该首先使用.select2('destroy')销毁它，然后为新的用途初始化它：

function generateSelect2() {
  if($('.answer-select').length) {
    $('.answer-select').select2('destroy').select2({
      allowClear: true,
      width: '100%',
      placeholder: "Please choice answer(s)"
    });
  }
}

希望这能有所帮助。