Question

这是我第一次尝试使用select2而我正在解决一个基本问题。

选择控制代码：

<select class="form-control" id="trade-select" name="trade-select">
     <option>...</option>
</select>

我使用以下代码通过coldfusion函数获取数据：

var options =
    {
        theme: 'bootstrap',
        ajax:
        {       
            url: "/ajax/search-trades.cfm",
            dataType: 'json',
            data: function (params) { return { query: params.term, 'groups_only': true }; },

            processResults: function (data, page)
            { // parse the results into the format expected by Select2.
                alert(data.DATA); // see note further below
                return {results: data.DATA, more: false};
            }

        }
    };

    $('#trade-select').css('width', '100%').select2(options)
        .on('change', function(event)
        {
            if (this.value == '') return;
            $('#trade-select').val('').trigger('change');
        });

从调用ajax URL返回的原始JSON数据如下：

{"COLUMNS":["TRADE_CATEGORY"],"DATA":[["Appliance Repairs"],["Furniture Repair"],["Painting &amp; Decorating"]]}

上面代码中的警告返回以下内容，基本上是逗号分隔的列表，没有括号或任何内容：

家电维修，家具维修，涂装及装饰

问题是select不会填充返回的数据。我猜测它与返回数据的格式有关。

不确定我是否提供了足够的信息，如果您还需要其他信息，请与我们联系。

对于任何可能有想法的ColdFusion开发人员，以下是通过ajax url调用的ColdFusion模板。我意识到我可以在没有中间模板的情况下直接拨打CFC电话：

<cfsilent>
<cfparam name="url.groups_only" default="true">
<cfparam name="url.query" default="">

<cfset oSystem = createObject("component","cfcs.system")>
<cfset qTradeCategories = oSystem.getTradeCategories(
    groups_only=url.groups_only,
    query=url.query)>
</cfsilent> 
<cfoutput>#SerializeJSON(qTradeCategories)#</cfoutput>

Answer 1

results的结构应该是一个对象列表，其中每个对象必须有id和text个键：

[
  {
    'id': 4,
    'text': 'some text'
  },
  {
    'id': 3,
    'text': 'some other text'
  }
]

由于您的数据不在该结构中 - 您可以确保发送正确的结构，或者在javascript中生成它：

results: data.DATA.reduce(function(a, b) { 
      a.push({'id': b[0], 'text': b[0]})
      return a;
 }, [])

data = [["Appliance Repairs"],["Furniture Repair"],["Painting &amp; Decorating"]]

console.log(data.reduce(function(a, b) { 
  a.push({'id': b[0], 'text': b[0]})
  return a;
}, []))

Select2问题填充选择

1 个答案: