选择2动态添加图像图标到选项
这就是select2.github.io为您提供的：
function addIcons(opt) { if (!opt.id) { return opt.text; } var $opt = $( ' + '.png)
' + opt.text + '' ); return $opt; } 我想在我的选项中添加数据图像属性：
Country 1
并将其记录在函数中：
function addIcons(opt) { if (!opt.id) { return opt.text; } var optimage = opt.attr('data-image'); var $opt = $( '
' + opt.text + '' ); return $opt; }
可悲的是，一个简单的console.log（opt）; 在函数中没有返回任何内容，所以我无法看到我是否可以访问我的数据图像属性。 上面的代码块返回一个错误，所以这显然不起作用。 对此事有何建议？
使用attr解决并在Select2 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 = $( '
' + opt.text.toUpperCase() + '' ); return $opt; } };
如果optimage返回“undefined”，请尝试我的示例：其工作正常：
$("#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 = $( ' ' + $(opt.element).text() + '' ); return $opt; } };
我解决了这段代码的问题： 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 = $( ' ' + opt.text + '' ); return $opt; } };
试试这个：
var optimage = $(opt).data('image'); //or $(opt).attr('data-image') var $opt = $( ' ' + $(opt).text() + '' );
不一定与问题相关，但在我的情况下它不起作用，因为如果您使用Select 2 <4.0，则templateResult和templateSelection不存在。 请改用formatResult和formatSelection 。