javascript - onchange html 值返回后 select2 不起作用

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)"
    });
  }
}

希望这有帮助。