添加"数据 - " select2的属性

时间:2015-11-26 13:54:17

标签: javascript jquery-select2

我已经看到很多Select2选项标签的示例,其中包含"数据 - "属性,我想这样做。

我使用ajax来获取数据。我得到了构建选择所需的IDTEXT

  

但是我怎样才能为它添加更多属性?

我只是没有找到添加它们的方法。

$(element).select2({
    placeholder: 'Select one...',
    width: '100%',
    minimumInputLength: 2,
    ajax: {
        url: '/my/url',
        dataType: 'json',
        data: function(params) {
            return {
                q: params.term,
                page: params.page
            };
         },
         processResults: function(data, page) {
             console.log(data);
             return {
                 results: data
             };
         },
         cache: true
     }
 });

3 个答案:

答案 0 :(得分:32)

此解决方案适用于Select2 4.0或更高版本。

假设您所谈论的属性已加载到您在processResults中返回的数组中。例如,如果您选择的是(' id':1,' text':' some-text',' custom_attribute' :' hello world')

然后,您可以执行更改事件:

data=$("#selector").select2('data')[0];
console.log(data.custom_attribute);//displays hello world

希望有所帮助......

答案 1 :(得分:0)

我不确定你究竟在问什么,但如果你想添加数据属性,你可以这样做..

在Jquery中:

$(element).attr('data-info', '222');

在javascript中:

document.getElementById('elementId').setAttribute('data',"value: 'someValue'");

答案 2 :(得分:0)

如果您对ajax的JSON响应如下所示:

[
  {
    "id": 1,
    "text": "option 1",
    "attr1": "custom attribute 1",
    "attr2": "custom attribute 2"
  },
  {
    "id": 2,
    "text": "option 2",
    "attr1": "custom attribute 3",
    "attr2": "custom attribute 4"
  }
]

然后,select2似乎自动将它们添加为选项的数据属性,

这是您访问它们的方式,例如在change事件中

$(element).on('change', function(e) {
  console.log($(this).select2('data')[0]);
})

在上面的示例中,您现在可以将您的json响应作为select2('data')属性进行访问。示例:$(this).select2('data')[0].attr1将返回custom attribute 1

通过这种方式,我可以获得所选选项所需的数据属性。