Question

我在我的表单中使用两个select2，如果我选择第一个select2 它将从服务器加载数据然后从中填充第二个select2 收到的数据。问题是它没有填充第二个select2任何人都知道如何解决它？

我尝试了以下代码，但没有运气:(

firstSelection = $('#first_id').select2( allowClear: false )
secondSelection = $('#second_id').select2(
  allowClear: false
)

firstSelection.on('select2-selecting', (e)->
  if e.val
    $.get(
      "/api/v1/posts/#{e.val}",
      (data)-> (
        console.log data
        secondSelection.select2("data", data)
      )
    )
)

Answer 1

在收到第一个select2的ajax调用的数据结果后，您需要重新初始化第二个select2元素。这样的事情应该有效：

firstSelection = $('#first_id').select2( allowClear: false )
secondSelection = $('#second_id')

firstSelection.on('select2-selecting', (e)->
  if e.val
    $.get(
      "/api/v1/posts/#{e.val}",
      (data)-> (
        console.log data
        newOptions = data

        select = secondSelection
        if select.prop
          options = select.prop("options")
        else
          options = select.attr("options")
        $("option", select).remove()
        $.each newOptions, (val, text) ->
          options[options.length] = new Option(text, val)
        secondSelection.select2()
      )
    )
)

基本机制是从您的数据创建option，将它们添加到secondSelection元素，然后在该元素上再次初始化select2。

Select2：从远程服务填充数据

1 个答案: