Select2动态添加图像图标到选项
Posted
技术标签:
【中文标题】Select2动态添加图像图标到选项【英文标题】:Select2 add image icon to option dynamically 【发布时间】:2015-05-31 04:09:52 【问题描述】:这就是 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;
我想在我的选项中添加一个 data-image 属性:
<option value="flag" data-image="/images/flags/flag.png">Country 1</option>
并将其记录到函数中:
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;
可悲的是,一个简单的 console.log(opt);在函数中不返回任何内容,所以我看不到我是否可以访问我的 data-image 属性。上面的代码块返回一个错误,所以这显然是行不通的。对这个问题有什么建议吗?
【问题讨论】:
一个错误?具体的错误信息是什么?你有 jsfiddle 演示吗? 【参考方案1】:使用 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 = $(
'<span><img src="' + optimage + '" /> ' + opt.text.toUpperCase() + '</span>'
);
return $opt;
;
【讨论】:
【参考方案2】:如果 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;
;
【讨论】:
【参考方案3】:我用这段代码解决了问题: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 + '" /> ' + opt.text + '</span>'
);
return $opt;
;
【讨论】:
这与我的示例相同,但不起作用: var optimage = opt.attr('data-image'); 我尝试完成答案【参考方案4】:试试这个:
var optimage = $(opt).data('image'); //or $(opt).attr('data-image')
var $opt = $(
'<span><img src="' + optimage + '" class="img-flag" /> ' + $(opt).text() + '</span>'
);
【讨论】:
优化返回“未定义”。我也试过这种方式。【参考方案5】:不一定与问题相关,但在我的情况下它不起作用,因为如果您使用 Select 2 templateResult 和 templateSelection
不存在。请改用formatResult
和formatSelection
。
【讨论】:
以上是关于Select2动态添加图像图标到选项的主要内容,如果未能解决你的问题,请参考以下文章