在 select2 ajax rails 上填充初始值

Posted 2023-05-07

【中文标题】在 select2 ajax rails 上填充初始值

【英文标题】：Populate initial value on select2 ajax rails

【发布时间】：2014-10-24 20:01:45

【问题描述】：

林努力得到这个工作 P>

我有一个轨道形成，看起来像这样 P>

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

在我的咖啡的js P>

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

在搜索工作正常，数据也存储，但是当我重新打开网页即编辑保存的记录我与加载到选择框没有默认值空白选择2对象。

它不是拾取从所保存的记录和犯规显示它的现有值。我可以搜索没有问题 - 多数民众赞成确定，它只是不工作 P>

现在我已经打了InitSelection，试图把“VAL”但它只是不工作。

什么是加载从记录存储到SELECT2框中的值的正确方法？ P>

谢谢

解FROM 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】：

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

%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 和 value 用 || 分开。每个 ID/值对以逗号分隔。我的是一个多选下拉菜单。您可以修改此单选下拉菜单，如下所示：

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

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

【讨论】：

好的，根据我的出发点，您能修改代码以显示单个版本吗？

添加了与单选下拉菜单一起使用的代码版本