Javascript 能否将图标/图像添加到Sumoselect中的选项中?

Javascript 能否将图标/图像添加到Sumoselect中的选项中?,javascript,jquery,image,icons,sumoselect.js,Javascript,Jquery,Image,Icons,Sumoselect.js,我使用jquery插件sumoselect为select选项元素构建了一个相当复杂的表单。 我现在需要为每个选项添加一个图标/图像。 图像src将是我网站上的一个jpg文件 有没有机会通过sumoselect实现这一点 谢谢 编辑 我补充说,图像是可变的,取决于“选项”值 多亏了gaetanoM,我详细阐述了他的片段,并得出: <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js">

我使用jquery插件sumoselect为select选项元素构建了一个相当复杂的表单。 我现在需要为每个选项添加一个图标/图像。 图像src将是我网站上的一个jpg文件

有没有机会通过sumoselect实现这一点

谢谢

编辑 我补充说,图像是可变的,取决于“选项”值

多亏了gaetanoM,我详细阐述了他的片段,并得出:

<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>
另一个问题是图像在首次加载时不显示,而仅在打开和更改时显示

我最终得到了一个丑陋的解决方案,就是直接在
中添加图像

为了避免在移动设备上显示带有原生select的html,我有一个“checkmobile”函数,只在计算机浏览器上显示图像

此外,该解决方案不允许在使用本机mobile select选择后查看图像,在pc上悬停“提示”时显示html

无需检查任何重新加载点即可显示图像的简单方法?


再次感谢

您可以使用相扑:开幕式添加图标。使用此事件,可以向每个列表项添加图标并调整标签样式:

$('.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')。关于('sumo:opening',函数(e){
$(this).closest('.SumoSelect').find('.optWrapper li').each(函数(idx,ele){
$(this.find('i').remove();
$(this.prepend(“”);
$(this).find('label').css('display','inline');
})
})
$('.testselect1').SumoSelect();
$('.testselect1')。on('sumo:opening',函数(e){
$(this).closest('.SumoSelect').find('.optWrapper li').each(函数(idx,ele){
$(this.find('i').remove();
$(this.prepend(“”);
$(this).find('label').css('display','inline');
})
});
$('.testselect1')。on('change',函数(e){
var selectBox=$(this).closest('.SumoSelect').find('.CaptionCont.selectBox');
selectBox.find('>i').remove();
在(“”)之前选择box.find('span').css('display','inline');
});

沃尔沃汽车
萨博
梅赛德斯
奥迪

非常感谢。如果我需要一个由“价值”驱动的不同的形象呢?例如:值为1的选项将有img“1-thumb.jpg”,值为2“2-thumb.jpg?我想我对上面的评论进行了排序,但还有另一个需要…一旦选中,如何使图像保持可见?@lui Sumoselect没有选择事件,因此我使用了更改事件。请参阅更新的片段。
$(this).closest('.SumoSelect').find('.optWrapper li.opt').each(function(idx, ele) {
$('.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');
    })
})