在select2 ajax rails上填充初始值

时间:2014-08-31 11:22:14

标签: jquery ruby-on-rails jquery-select2

我努力让这个工作

我有一个看起来像这样的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

1 个答案:

答案 0 :(得分:2)

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

%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

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