使用 select2 添加“data-”属性

Posted 2023-05-07

【中文标题】使用 select2 添加“data-”属性

【英文标题】：Adding "data-" attributes with select2

【发布时间】：2016-02-29 15:47:21

【问题描述】：

我已经看到很多Select2 选项标签设置为“data-”属性的例子，我想这样做。

我正在使用 ajax 来获取数据。我得到了构建选择所需的ID 和TEXT。

但是我怎样才能给它添加更多的属性呢？

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

$(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
     
 );

【问题讨论】：

如果可能的话，贴出你的代码..

【参考方案1】：

此解决方案适用于 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

希望对你有帮助..

【讨论】：

再好不过了！谢谢！

您使用 $('#selector') 定位的元素是什么？那应该是select2下拉菜单吗？还是下拉列表中的select2“选项”？还有什么？

@AaronHill，它必须是下拉菜单。你没有很多选择可以尝试。顺便提一句。谢谢杰弗里。我不知道你是怎么找到的，但这就是我要找的……

请注意，在更改事件中，var data=$(this).select2('data')[0]; 将获得所选选项的值，即 data.role 如果您的源对象中有该属性

澄清一下，被选元素（this）的索引是var ind = $(this).index(); var data=$(this).select2('data')[ind];

【参考方案2】：

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

在 Jquery 中：

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

在javascript中：

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

【讨论】：

是的，这正是我想要做的。但是我想在 Select2 里面做，因为每个option 标签都会有自己的“data-something”属性。

因此您想将data-attribute 添加到所有选项。对吗？

是的！假设我希望所有选项都具有属性data-alias

试试这个$('#select option').attr('data-alias', 'yourvalue');

【参考方案3】：

如果您对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

通过这种方式，我能够获取所选选项所需的数据属性。

【讨论】：

jishan $(this).select2('data') 不适合您？所以基本上，如果你已经为你的 select2 选项设置了数据属性，它会起作用，至少对我有用。