Select2 是不是允许将“文本”键的名称更改为其他名称？

Posted 2023-05-07

【中文标题】Select2 是不是允许将“文本”键的名称更改为其他名称？

【英文标题】：Does Select2 allow for changing name of "text" key to something else?Select2 是否允许将“文本”键的名称更改为其他名称？

【发布时间】：2013-10-21 21:20:37

【问题描述】：

我有以下 Select2 配置。

$scope.select2Options = 
    simple_tags: false,
    placeholder : "Search for a language",
    multiple : true,
    contentType: "application/json; charset=utf-8",
    minimumInputLength : 3,
    ajax : 
        url : "/bignibou/utils/findLanguagesByLanguageStartingWith.json",
        dataType : 'json',
        data : function(term) 
            return  
                language : term
            ;
        ,
        results : function(data, page) 
            return 
                results :
                    data.map(function(item) 
                        return 
                            id : item.id,
                            text : item.description
                        ;
                    
            );
        
    
;

这让我可以正确地填充 select2 控件。

但是，当我使用 Ajax 发布包含标签（以及其他）的整个表单时会出现问题：发送到服务器的 json 数组包含具有两个名为 id 的属性的对象和 text 而服务器需要 id 和 description。

从我的 json 中查看 sn-p：

"languages":["id":46,"text":"Français","id":1,"text":"Anglais"]

select2 是否允许将 text 的名称更改为其他名称？

【参考方案1】：

将我的 js 更改为以下排序问题：

function format(item)  return item.description; ;

$scope.select2Options =    
    simple_tags: false,
    placeholder : "Search for a language",
    multiple : true,
    contentType: "application/json; charset=utf-8",
    minimumInputLength : 3,
    data: text: "description" ,
    formatSelection: format,
    formatResult: format,
    ajax : 
        url : "/bignibou/utils/findLanguagesByLanguageStartingWith.json",
        dataType : 'json',
        data : function(term) 
            return  
                language : term
            ;
        ,
        results : function(data, page) 
            return 
                results :
                    data.map(function(item) 
                        return 
                            id : item.id,
                            description : item.description
                        ;
                    
            );
        
    
;

注意：必须使用 Select2 ***属性data。

【参考方案2】：

这是在 ui-select2 上使用自定义 id 和文本属性所必需的最低配置

$scope.clients: 
  data: [ ClientId: 1, ClientName: "ClientA" ,  ClientId: 2, ClientName: "ClientB" ],
  id: 'ClientId',
  formatSelection: function (item)  return item.ClientName; ,
  formatResult: function (item)  return item.ClientName; 

【参考方案3】：

Select2 要求应为选项显示的文本存储在 text 属性中。您可以使用以下 javascript 从任何现有属性映射此属性：

var data = $.map(yourArrayData, function (obj) 
  obj.text = obj.text || obj.name; // replace name with the property used for the text
  obj.id = obj.id || obj.pk; // replace pk with your identifier
  return obj;
);

Documentation