jQuery Select2 - get style attribute from original option's select

Question

Here is my HTML code:

<select class="select2">
    <option value="1" style="background-color: #ff0000;">OPTION 1</option>
    <option value="2" style="background-color: #ffffff;">OPTION 2</option>
    ....
    <option value="144" style="background-color: #000000;">OPTION 144</option>
</select>

and finally, I use select2 on print this select list:

$('.select2')select2();

The problem is with style attribute - when I set this attribute into every option, jQuery script doesn't copy this attribute for <li> lists.

I know, I can set every background-color into <style></style> tags, but I have more options (~150) and I manage this attribute (background-color) on my site as live (when user change some options, then I change background-color), so I need solution which will be live-copy style attribute from original options list and when I reset select list (using $('.select2').select2()), bg color will be reset also.

How I can do it?

@UPDATE

I solved problem in that way:

function formatState(data, container)
    {
        if (data.element)
        {
            $(container).css('background-color', '#'+$(data.element).attr('data-style'));
        }
        return data.text;
    }

$('.select2').select2({templateResult: formatState});

and I replace options HTML code:

<option value="1" style="background-color: #ff0000;">OPTION 1</option>

for this:

<option value="1" data-style="ff0000">OPTION 1</option>

UfguFugullu · Accepted Answer · 2020-05-05T11:06:11.480

At the first point, just as an option, you can define classes and use it like the jquery example below with replacing the .data('style') with .data('class') and style=" with class=". Then you can write this HTML

<!-- ... -->
<option value="1" data-class="option-white">OPTION 1</option>
<!-- ... -->

SOLUTION

Otherwise you can templating the dropdown with the templateResult option - you find the docs here. Based on the example you shared I would solve it like this:

$(document).ready(function() {

  function formatState(state) {
    if (!state.id) {
      return state.text;
    }

    return $(
      '<div style="' + $(state.element).data('style') + '"> ' + state.text + '</div>'
    );
  };

  $('.select2').select2({
    templateResult: formatState
  });
  
});

.select2-results__option { padding: 0 !important; }
.select2-results__option div { padding: 6px; }

<link href="https://cdn.jsdelivr.net/npm/select2@4.0.13/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/select2@4.0.13/dist/js/select2.min.js"></script>

<select class="select2">
    <option value="1" data-style="background-color: #ff0000;">OPTION 1</option>
    <option value="2" data-style="background-color: #ffffff;">OPTION 2</option>
    <!-- .... -->
    <option value="144" data-style="background-color: #000000;">OPTION 144</option>
</select>

Thanks for your reply! Your solution is helpful but not exactly because it works and text of option has background that I set - it's good. But the problem is with background of full option (not only text but all place of option) - here is still white background. I need solution for set background of all place into every option. Is it possible to do it? — Pavlo P, May 05 '20 at 10:43
I solved my problem based on your example - `templateResult` was very helpful and this post: https://stackoverflow.com/questions/33926375/how-to-pass-option-attributes-to-select2 I edited my first post with solution. Thanks. — Pavlo P, May 05 '20 at 11:03
@PavloP Your solution is the pretty good. If you want to know another solution, there is a option with modifing the `CSS` of the container (see in my editet answer). — UfguFugullu, May 05 '20 at 11:08
In my case, I can't use classes because user can set background color using colorpicker, so I can't create CSS classes with 100.000 color options (or more). — Pavlo P, May 05 '20 at 11:10

jQuery Select2 - get style attribute from original option's select

1 Answers1