Sumoselect 中的选项可以添加图标/图像吗?
Posted
技术标签:
【中文标题】Sumoselect 中的选项可以添加图标/图像吗?【英文标题】:Can icon/image be added to options in Sumoselect? 【发布时间】:2019-06-17 04:25:06 【问题描述】:我使用 jquery 插件 sumoselect 为选择选项元素构建了一个非常复杂的表单。 我现在需要为每个选项添加一个图标/图像。 图片 src 将是我网站上的 jpg 文件。
有没有机会通过 sumoselect 实现这一目标?
谢谢
编辑 我补充说图像是可变的,并且取决于“选项”值。
感谢 gaetanoM,我详细阐述了他的 sn-p 并得出:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/HemantNegi/jquery.sumoselect@master/sumoselect.css">
<script src="https://cdn.jsdelivr.net/gh/HemantNegi/jquery.sumoselect@master/jquery.sumoselect.min.js"></script>
<select name="somename" class="testselect1">
<option value="1000">Volvo</option>
<option value="1001">Saab</option>
<option value="1002">Mercedes</option>
<option value="1003">Audi</option>
</select>
jquery:
$('.testselect1').SumoSelect();
$('.testselect1').on('sumo:opening', function(e)
//console.log(e);
$(this).closest('.SumoSelect').find('.optWrapper li').each(function(idx, ele)
console.log("idx",idx,"ele",ele);
//$(this).find('i').remove();
$(this).prepend('<img style="height:10px" '+
'src="https://www.freeiconspng.com/uploads/heart-png-15.png">');
$(this).prepend($('.testselect1 option').eq(idx).val());
$(this).find('label').css('display', 'inline');
)
)
为了示例,我使用了修复图像和添加的文本。
看起来不错!
谢谢
编辑 2
对 gaetanoM 代码的一个小改进是添加 .opt :这将避免将图像添加到 optgroup 的标头(如果存在的话):
$(this).closest('.SumoSelect').find('.optWrapper li.opt').each(function(idx, ele)
另一个问题是图像在第一次加载时不显示,而仅在打开和更改时显示...
我暂时得到了一个 ugly 解决方案,其中包括将图像直接添加到 <option></option>
内部。
为了避免在移动设备上显示带有原生选择的 html,我有一个“checkmobile”功能,该功能仅将图像放在计算机浏览器上。
除了丑陋之外,此解决方案不允许查看使用本机移动选择选择的图像,并且在 pc 上它在悬停“提示”时显示 html....
有什么简单的方法可以在不检查任何重新加载点的情况下显示图像?
再次感谢
【问题讨论】:
【参考方案1】:您可以使用 sumo:opening 事件添加图标。使用此事件,您可以为每个列表项添加图标并调整标签样式:
$('.testselect1').on('sumo:opening', function(e)
$(this).closest('.SumoSelect').find('.optWrapper li').each(function(idx, ele)
$(this).find('i').remove();
$(this).prepend('<i class="fas fa-band-aid"></i>');
$(this).find('label').css('display', 'inline');
)
)
$('.testselect1').SumoSelect();
$('.testselect1').on('sumo:opening', function(e)
$(this).closest('.SumoSelect').find('.optWrapper li').each(function(idx, ele)
$(this).find('i').remove();
$(this).prepend('<i class="fas fa-angle-right"></i>');
$(this).find('label').css('display', 'inline');
)
);
$('.testselect1').on('change', function(e)
var selectBox = $(this).closest('.SumoSelect').find('.CaptionCont.SelectBox');
selectBox.find('>i').remove();
selectBox.find('span').css('display', 'inline').before('<i class="fas fa-angle-right"></i>');
);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/HemantNegi/jquery.sumoselect@master/sumoselect.css">
<script src="https://cdn.jsdelivr.net/gh/HemantNegi/jquery.sumoselect@master/jquery.sumoselect.min.js"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css">
<select name="somename" class="testselect1">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
【讨论】:
非常感谢。如果我需要由“价值”驱动的不同图像怎么办?例如:值为 1 的选项将有 img "1-thumb.jpg", value 2 "2-thumb.jpg? 我想我已经对上面的评论进行了排序,但还有另一个需要......如何在选择后保持图像可见? @lui Sumoselect 没有选择事件,因此我使用了更改事件。查看更新的 sn-p。以上是关于Sumoselect 中的选项可以添加图标/图像吗?的主要内容,如果未能解决你的问题,请参考以下文章