jQuery Select2 动态添加图像图标到选项
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/29290389/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Select2 add image icon to option dynamically
提问by Warre Buysse
This is what select2.github.io gives you:
这是 select2.github.io 给你的：
function addIcons(opt) {
if (!opt.id) {
return opt.text;
}
var $opt = $(
'<span><img src="/images/flags/' + opt.element.value.toLowerCase() + '.png" class="img-flag" /> ' + opt.text + '</span>'
);
return $opt;
}
I'd like to add a data-image attribute to my options:
我想在我的选项中添加一个 data-image 属性：
<option value="flag" data-image="/images/flags/flag.png">Country 1</option>
and log it in the function:
并将其记录在函数中：
function addIcons(opt) {
if (!opt.id) {
return opt.text;
}
var optimage = opt.attr('data-image');
var $opt = $(
'<span><img src="/images/flags/' + optimage + '" class="img-flag" /> ' + opt.text + '</span>'
);
return $opt;
}
Sadly, a simple console.log(opt); doesn't return anything in the function, so I can't see if I can access my data-image attribute. The above block of code returns an error, so this obviously doesn't work. Any suggestions on this matter?
可悲的是，一个简单的 console.log(opt); 在函数中不返回任何内容，因此我无法查看是否可以访问我的 data-image 属性。上面的代码块返回一个错误，所以这显然不起作用。关于这个问题有什么建议吗？
采纳答案by JHOAN B. HENRICHE
Solved using attrand tested on Select2 4.0.6-rc.0.
使用attrSelect2 4.0.6-rc.0解决并测试。
$(".class").select2({
templateResult: formatState,
templateSelection: formatState
});
function formatState (opt) {
if (!opt.id) {
return opt.text.toUpperCase();
}
var optimage = $(opt.element).attr('data-image');
console.log(optimage)
if(!optimage){
return opt.text.toUpperCase();
} else {
var $opt = $(
'<span><img src="' + optimage + '" width="60px" /> ' + opt.text.toUpperCase() + '</span>'
);
return $opt;
}
};
回答by G?khan Hay?rsever
If optimage returns "undefined" try my sample: its working fine:
如果 optimage 返回“未定义”，请尝试我的示例：它工作正常：
$("#selectUserForChat").select2({
templateResult: addUserPic,
templateSelection: addUserPic
});
function addUserPic (opt) {
if (!opt.id) {
return opt.text;
}
var optimage = $(opt.element).data('image');
if(!optimage){
return opt.text;
} else {
var $opt = $(
'<span class="userName"><img src="' + optimage + '" class="userPic" /> ' + $(opt.element).text() + '</span>'
);
return $opt;
}
};回答by JHOAN B. HENRICHE
I solved problem with this code: var optimage = $(opt.element).data('image');
我用这段代码解决了问题： var optimage = $(opt.element).data('image');
$(".category").select2({
templateResult: formatState,
templateSelection: formatState
});
function formatState (opt) {
if (!opt.id) {
return opt.text;
}
var optimage = $(opt.element).data('image');
if(!optimage){
return opt.text;
} else {
var $opt = $(
'<span><img src="' + optimage + '" width="23px" /> ' + opt.text + '</span>'
);
return $opt;
}
};
回答by PeterKA
Try this:
尝试这个：
var optimage = $(opt).data('image'); //or $(opt).attr('data-image')
var $opt = $(
'<span><img src="' + optimage + '" class="img-flag" /> ' + $(opt).text() + '</span>'
);
回答by Lucas Bustamante
Not necessarily related to the question, but in my case it wasn't working because if you are using Select 2 < 4.0, templateResultand templateSelectiondoes not exist. Use formatResultand formatSelectioninstead.
不一定与问题有关，但在我的情况下它不起作用，因为如果您使用的是 Select 2 < 4.0，templateResult并且templateSelection不存在。使用formatResult和formatSelection代替。
