select2：如何正确地向用户显示预填充的选项？答案

【问题标题】：select2: How to display pre-filled options properly to the user?select2：如何正确地向用户显示预填充的选项？
【发布时间】：2016-07-14 14:43:45
【问题描述】：

我在this jsfiddle 上有一个有效的select2 实现。它可以搜索 Github 存储库并返回结果，以便用户可以选择它们。如果只有 1 个 repo 匹配给定的搜索，它将被自动选择。

我需要能够使用一些默认选项预先填写我的 select2 表单。正如the docs 中所述，我应该能够做这样的事情：

<select id='select2_element' multiple='multiple' style='width:100%;'>
  <option value="easypr-ja" selected="selected">EasyPR-Java 70 32393764</option>
</select>

当我按下console.log all selected data 按钮时，我可以看到我的预填充回购的id 和text 是可访问的，但在浏览器中，上述预填充选项显示为undefined undefined easypr-ja。

我需要做什么才能正确显示默认选项的值？

我的实现正在做一些自定义格式，如下所示：

var createRepo, formatRepo, formatRepoSelection, selectRepos;

formatRepoSelection = function(element) {
  return element.name + ' ' + element.forks + ' ' + element.id;
};

formatRepo = function(element) {
  var markup;
  if (!element.loading) {
    return markup = element.name + ' ' + element.id;
  }
};

createRepo = function() {
  $(".btn-create-repos").off("click");
  return $(".btn-create-repos").click(function(e) {
    var el, element_ids;
    el = $(e.currentTarget);
    element_ids = $("#select2_element").select2('data');
    return console.log(element_ids);
  });
};

selectRepos = function() {
  var option, select2_element;
  select2_element = $('#select2_element');
  select2_element.select2({
    placeholder: "Type in 'easypr-ja' to get only 1 result",
    ajax: {
      url: "https://api.github.com/search/repositories",
      dataType: 'json',
      delay: 250,
      data: function (params) {
        return {
          q: params.term,
          page: params.page
        };
      },
      processResults: function (data, params) {

        if (data.items.length === 1) {
          setTimeout(function() {
              $("#select2-select2_element-results li:first-child").trigger('mouseup');
          }, 0);
          return {
            results: data.items
          };
        } else {
          params.page = params.page || 1;

          return {
            results: data.items,
            pagination: {
              more: (params.page * 30) < data.total_count
            }
          };
        }
      },
      cache: true
    },

    escapeMarkup: function(markup) {
      return markup;
    },
    minimumInputLength: 2,
    templateResult: formatRepo,
    templateSelection: formatRepoSelection
  });
};

$(function() {
  selectRepos();
  return createRepo();
});

【问题讨论】：

标签： javascript jquery select2 jquery-select2-4 select2-rails

【解决方案1】：

请按照下面的例子使用form_for，这可能会有所帮助

<%= f.select(:categories, Category.all.collect {|c| [c.name, c.id]}, {}, id: "event_categories", :multiple => true) %>

<script type="text/javascript">
    $("#event_categories").select2();
    <% if @event.id.present?%>
        $("#event_categories").val(<%= @event.categories.collect(&:id)%>).change()
    <% elsif params[:action]=="create" || params[:action]=="update" %>
        $("#event_categories").val(<%=params[:event][:categories].map(&:to_i).drop(1)%>).change()
    <% end %>
</script>

【讨论】：