jquery之在 select2 ajax rails 上填充初始值

我正在努力让它发挥作用

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

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

在我的咖啡js中

  $(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 

请您参考如下方法:

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

%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 

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