icon/image 可以添加到 Sumoselect 的选项中吗？

Question

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

是否有机会通过相扑实现这一目标select？

谢谢

编辑我补充说图像是可变的，取决于 "option" 值。

感谢 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>

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 的 header（如果它存在的话）：

$(this).closest('.SumoSelect').find('.optWrapper li.opt').each(function(idx, ele) {

另一个问题是图像在第一次加载时不显示，只有在打开和更改时才显示...

我暂时得到了一个 丑陋的 解决方案，该解决方案包括直接在 <option></option> 中添加图像。

为了避免在移动设备上用原生 select 显示 html，我有一个 "checkmobile" 功能，它只在计算机浏览器上显示图像。

此外，此解决方案不允许在 select 使用本机移动设备 select 后查看图像，而在 PC 上悬停 html "tips".....

有什么简单的方法可以在不检查任何重新加载点的情况下显示图像？

再次感谢

Answer 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>

icon/image 可以添加到 Sumoselect 的选项中吗？

Can icon/image be added to options in Sumoselect?

javascript

jquery

image

icons

sumoselect.js