CODEWITHSUNDEEP
jqueryhtmlselectjquery-select2dropdown
Zack Reid
Zack Reid

Reputation: 127

Different icons for multiple Select2 dropdowns

I am currently using Select2 to make my dropdowns searchable. I have gotten to the point of where I can change the icon but now when I am calling Select2 on another drop-down and change the icon it shows up twice. This is the code I have at the moment;

    $(".where__heading").select2({
        placeholder: "Try 'Belfast'",
        allowClear: false,
    });
    $('b[role="presentation"]').hide();
    $('.select2-selection__arrow').append('<img src="images/icons/travel.svg" alt="">');

   Calling in it again below on a different dropdown....

    $(".how__long").select2({
        placeholder: "1-2 days",
        allowClear: false,
    });
    $('b[role="presentation"]').hide();
    $('.select2-selection__arrow').append('<img src="images/icons/time.svg" alt="">');

I can't seem to figure this out. Do I just need to make this more precise;

$('.select2-selection__arrow').append('<img src="images/icons/time.svg" alt="">');

Thanks for the help :)

Upvotes: 0

Views: 733

Answers (1)

Soham
Soham

Reputation: 1281

Yes, it needs to be more precise. Something like this would work.

$('.where__heading').next().find('span.select2-selection__arrow').append('<img src="images/icons/travel.svg" alt="">');
$('.how__long').next().find('span.select2-selection__arrow').append('<img src="images/icons/time.svg" alt="">');

Upvotes: 1

Related Questions