Select2 动态添加图像图标到选项
Select2 add image icon to option dynamically
这就是 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;
}
我想在我的选项中添加数据图像属性:
<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); return 函数中没有任何内容,所以我无法查看是否可以访问我的数据图像属性。上面的代码块 return 是一个错误,所以这显然是行不通的。对此事有什么建议吗?
试试这个:
var optimage = $(opt).data('image'); //or $(opt).attr('data-image')
var $opt = $(
'<span><img src="' + optimage + '" class="img-flag" /> ' + $(opt).text() + '</span>'
);
我用这段代码解决了问题: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;
}
};
如果 optimage returns“未定义”试试我的样本:它工作正常:
$("#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;
}
};
不一定与问题相关,但在我的情况下它不起作用,因为如果您使用 Select 2 < 4.0,则 templateResult
和 templateSelection
不存在。请改用 formatResult
和 formatSelection
。
使用 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 + '" width="60px" /> ' + opt.text.toUpperCase() + '</span>'
);
return $opt;
}
};
这就是 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;
}
我想在我的选项中添加数据图像属性:
<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); return 函数中没有任何内容,所以我无法查看是否可以访问我的数据图像属性。上面的代码块 return 是一个错误,所以这显然是行不通的。对此事有什么建议吗?
试试这个:
var optimage = $(opt).data('image'); //or $(opt).attr('data-image')
var $opt = $(
'<span><img src="' + optimage + '" class="img-flag" /> ' + $(opt).text() + '</span>'
);
我用这段代码解决了问题: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;
}
};
如果 optimage returns“未定义”试试我的样本:它工作正常:
$("#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;
}
};
不一定与问题相关,但在我的情况下它不起作用,因为如果您使用 Select 2 < 4.0,则 templateResult
和 templateSelection
不存在。请改用 formatResult
和 formatSelection
。
使用 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 + '" width="60px" /> ' + opt.text.toUpperCase() + '</span>'
);
return $opt;
}
};