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

Posted 2023-03-14

【中文标题】如何在 laravel 中使用 AJAX 数据时设置 Select2 的选定值？

【英文标题】：How to set selected values of Select2 while using AJAX Data with laravel?

【发布时间】：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。

【参考方案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 ');

设置默认/初始值