如何在 laravel 中使用 AJAX 数据时设置 Select2 的选定值？答案

【问题标题】：How to set selected values of Select2 while using AJAX Data with laravel?如何在 laravel 中使用 AJAX 数据时设置 Select2 的选定值？
【发布时间】：2016-11-18 15:33:27
【问题描述】：

Controller@Update

  //Update
  $course = Course::findOrFail($id);
  $course->name = Input::get('name');
  $course->code = Input::get('code');
  $course->credits = Input::get('credits');
  $course->description = Input::get('description');

  $course->tags()->sync(Input::get('tags')); // Use of sync method

  //return [$course];
  $course->save();
  //Redirect
  Session::flash('message', 'Successfully edited the course : '.$course->name);
  return $this->show($course->code);

HTML

<pre>
<div class="form-group">
     {{Form::label('tags', 'Tag')}}
     {{Form::select('tags[]',[],null,array('multiple'=>'multiple','name'=>'tags[]','id'=>'tag_list','class'=>'form-control'))}}
   </div>
</pre>

Select2 脚本

function tagResultTemplater(tag) {
    return tag.name + " : " + tag.type;
  }

  function tagSelectionTemplater(tag) {
    return tag.id + " "+tag.name + " : " + tag.type;
  }
  $("#tag_list").select2({
    ajax: {
      url: "{!! route('tags.json') !!}",
      dataType: 'json',
      delay: 250,
      tags: true,
      data: function (params) {
        return {
          q: params.term, // search term
        };
      },
      processResults: function (data) {
        return {
          results: data
        };
      },
      cache: true
    },
    minimumInputLength: 1,
    placeholder: function(){
      $(this).data('placeholder');
    },
    templateResult: tagResultTemplater,
    templateSelection: tagSelectionTemplater

  });

我正在将课程管理系统作为一个研究生项目，简而言之，课程和标签之间存在多对多的关系，我想使用带有 Select2 包的同步方法来附加和分离课程中的标签一种方便的方法，但我找不到在使用 ajax 数据时设置 Select2 的选定值的方法。如果有人可以提供有关如何执行此操作的简单指南，将不胜感激：D。

【问题讨论】：

标签： jquery ajax laravel tags select2

【解决方案1】：

在类似的情况下，我只需要避免使用表单生成器

<select name="tags" id="tag_list" class="form-control" multiple>
   @foreach ($course->tags as $tag)
      <option value="{{ $tag->id }}" selected>{{ $tag->name }}</option> 
   @endforeach
</select>

【讨论】：

问题在于，当您将 ajax 数据与 Select2 一起使用时，它会删除所有写入的选项，并使用来自 ajax 请求的 json 响应重新写入它们
我也想使用这种方法，但现在的问题是 templateResult 和 templateSelection 返回 undefined : undefined 你知道如何编写选项标签以便 Select2 可以提取所需数据？
我之前没有使用自定义模板。但根据 select2 docs，它应该是相同的。检查 link 以获取带有预选选项的 ajax 示例，不要忘记检查模板的源代码。稍后我也会尝试测试它

【解决方案2】：

由于是 Ajax 请求，控件没有填充数据。在 Select2 v.4 > 中，如果你不想遵循官方文档的建议，你可以使用类似这个 JS 函数来设置初始值

function initSelect2(control, key, value){
    var data = {
        id: key,
        text: value
    };
    var initOption = new Option(data.text, data.id, false, false);
    control.append(initOption);
    control.val(value).trigger('change');
}

然后调用

initSelect2( $('#tags'), '{{ $tag->id }}', '{{ $tag->name }}');

设置默认/初始值

【讨论】：