在select2 ajax rails上填充初始值

Question

我努力让这个工作

我有一个看起来像这样的rails表单

%tr
  %td
    = f.label :company
  %td
    = f.hidden_field :companyid, class: 'select2 ajax', data: { source: companies_path }

在我的咖啡里面

  $(document).ready ->
   $(".select2").each (i, e) ->
    select = $(e)
    options = {}
    if select.hasClass("ajax")
      options.ajax =
        url: select.data("source")
        dataType: "json"
        data: (term, page) ->
          q: term
          page: page
          per: 10
        results: (data, page) ->
          results: data
      options.placeholder = "Select a value"
      options.dropdownAutoWidth = "true"
    select.select2 options
    return

搜索工作正常,数据的存储也是如此,但是当我重新打开页面即编辑保存的记录时,我得到一个空白的select2对象,没有默认值加载到选择框中.

它不会从保存的记录中获取现有值,也不会显示它.我可以搜索没问题 - 这一切都好,它只是不工作.

现在我玩了InitSelection并尝试设置"val",但它只是不起作用.

将记录中存储的值加载到select2框的正确方法是什么？

谢谢

来自emaillenin的解决方案请参见下文

$(document).ready ->
 $(".select2").each (i, e) ->
  select = $(e)
  options = {}
  if select.hasClass("ajax")
    options.ajax =
      url: select.data("source")
      dataType: "json"
      data: (term, page) ->
        q: term
        page: page
        per: 10
      results: (data, page) ->
        results: data
    options.placeholder = "Select a value"
    options.dropdownAutoWidth = "true"
    options.initSelection = (element, callback) ->
      data = {id: element.val().split('||')[0], text: element.val().split('||')[1]};
      callback data
  select.select2 options
  return

Answer 1

要设置初始值，请在页面加载时直接在隐藏字段上设置值。

%tr
  %td
    = f.label :company
  %td
    = f.hidden_field :companyid, value: "#{@company.id}||#{@company.name}", class: 'select2 ajax', data: { source: companies_path }

然后在 javascript 中，使用该值并设置正确的下拉值：

initSelection: (element, callback) ->
      data = []
      $(element.val().split(",")).each ->
        data.push
          id: this.split('||')[0]
          text: this.split('||')[1]
      $(element).val('')
      callback data

在这里，我将 ID 和值用 || 分开。每个 ID/值对都用逗号分隔。我的是一个多选下拉列表。您可以修改单选下拉列表，如下所示：

initSelection: (element, callback) ->
      data = {}
      data.id = $(element).val().split('||')[0]
      data.text: $(element).val().split('||')[1]
      $(element).val('')
      callback data

这里要注意的关键是，您需要使用要设置的数据对象来调用回调方法。