Можно ли добавить значок / изображение к параметрам в Sumoselect? - PullRequest
Новая
       17

Можно ли добавить значок / изображение к параметрам в Sumoselect?

0 голосов
/ 23 января 2019

Я построил довольно сложную форму, используя для выбора элементов опции плагин jquery sumoselect.Мне нужно было бы сейчас добавить значок / изображение для каждой опции.Изображение src будет файлом jpg на моем сайте.

Есть ли шанс достичь этого с помощью sumoselect?

Спасибо

РЕДАКТИРОВАТЬ Я добавляю, чтоизображение является переменным и зависит от значения "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 (если оно существует): 

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

Другая проблема заключается в том, что изображение не отображается при первой загрузке, а только при открытии и изменении ...

На данный момент я получил решение некрасиво , которое заключается в добавлении изображения прямо ВНУТРИ <option></option>.

Чтобы не показывать HTML с нативным выборомна мобильных устройствах у меня есть функция «checkmobile», которая помещает изображение только в компьютерные браузеры.

Кроме того, это решение не позволяет увидеть изображение, выбранное с помощью встроенного мобильного выбора и включенногоpc показывает html при наведении курсора на «подсказки» ....

Есть ли простой способ показать изображение без проверки точки перезагрузки?

Еще раз спасибо

1 Ответ

0 голосов
/ 23 января 2019

Вы можете добавить иконки, используя событие sumo: открытие. С помощью этого события вы можете добавить значки к каждому элементу списка и настроить стиль метки: 

$('.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>
...