我已经看到很多Select2
选项标签的示例,其中包含"数据 - "属性,我想这样做。
我使用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
}
});
答案 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
通过这种方式,我可以获得所选选项所需的数据属性。