Question

您好我正在使用select2，我需要实现以下目标：当服务器返回数据时（基于用户输入的内容）我需要带一个额外的信息（除了id和文本）并保留以供以后使用。

这是我的代码：

            $("select[name='address-city']").select2({
            language: 'pt-BR',
            placeholder: "Selecione a cidade...",
            tags: true,
            minimumInputLength: 3,
            ajax: {
                url: 'Account/Cities/Find/',
                dataType: 'json',
                type: "GET",
                quietMillis: 50,
                processResults: function (data) {
                    return {
                        results: $.map(data, function (item) {
                            return {
                                text: item.Name,
                                //slug: item.slug,
                                id: item.Id,
                                cc: item.State
                            }
                        })
                    };
                }
            }
        }).change(function () {
            //I NEED THAT "cc"EXTRA INFO HERE
        });

这是服务器返回的数组（它已经正常工作）：

[{"Id":1,"Name":"Porto Alégre","State":"RS"}]

所以，请注意我的代码中我把评论“//我需要”cc“额外信息”，请告诉我如何实现这样的事情。

我想到了这样的事情：

var extraInfo = $(this).select2('data').cc;

......但似乎没有用。

提前致谢。

Answer 1

我当时的解决方案可能不是最高级的解决方案，但它确实可以解决问题。所以我提出的解决方案是：

processResults: function (data) {
                        return {
                            results: $.map(data, function (item) {
                                return {
                                    text: item.Name + '-' + item.State,
                                    id: item.Id + "|" + item.State,
                                }
                            })
                        };
                    }

和...

if($(this).val().indexOf('|') > 0){
                        var data = $(this).val().split('|');
                        cityId = data[0];
                        stateId= data[1];
                        ...

所以你可以看到，我加入了我需要的2条信息，然后使用split（）恢复它们。

同样，这可能不是最好的解决方案，但是因为似乎没有人知道......在工作方面做得比什么都没有好，对吧？

希望我能帮助任何人。

Answer 2

以为我会给你一个可能对你更好的答案，因为你的方式是我认为凌乱的。

所以这是我的JSON例如：

{  
"results":[  
  {  
     "id":1,
     "text":"Random Name",
     "customer_id":1,
     "customer_name":"Random Name"
  },
  {  
     "id":1454,
     "text":"Random Name",
     "customer_id":3338,
     "customer_name":"Random Name"
  },
  {  
     "id":1038,
     "text":"Random Name",
     "customer_id":3190,
     "customer_name":"Random Name"
  },
  {  
     "id":1039,
     "text":"Random Name",
     "customer_id":3340,
     "customer_name":"Random Name"
  }
}

现在我的JS为select2的ajax部分， processResults 是关键：

$("#boat-select").select2({
    ajax: {
        url: "{!! url('boats/json') !!}",
        dataType: "json",
        data: function (term) {
            return {query: term.term }
        },
        results: function (data) {
            return {
                results: data.results
            };
        },
        processResults: function (data) {
            return {
                results: $.map(data.results, function (item) {
                    console.log(item);
                    return {
                        text: item.text,
                        id: item.id,
                        cust_id: item.customer_id,
                        cust_name: item.customer_name,
                    }
                })
            };
        }
    },
    createSearchChoice: function (term, data) {
        if ($(data.results).filter(function () {
                    return this.text.localeCompare(term) === 0;
                }).length === 0) {
            return {
                id: term,
                text: term
            };
        }
    },
    width: '100%',
});

现在要访问这些额外字段，请使用以下内容：

$('#boat-select').on('select2:select', function(evt){
    cust_id = evt.params.data.cust_id;
    cust_name = evt.params.data.cust_name;

    var opt = "<option value='"+cust_id+"' selected ='selected'>" + cust_name + " </option>";
    $("#customer-select").html(opt);
    $("#customer-select").val(cust_id).trigger("change");
});

上面的监听器实际上用于设置另一个select2的select2值，具体取决于选择的船只它会设置拥有该船的客户选择框，以防你想知道我在那里做了什么。

希望这会对你有所帮助。

select2 - 保留额外信息

2 个答案: