jQuery Select2 - получить атрибут стиля из выбора исходной опции - PullRequest
Новая
       7

jQuery Select2 - получить атрибут стиля из выбора исходной опции

0 голосов
/ 05 мая 2020

Вот мой код HTML: 

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

и, наконец, я использую select2 для печати этого списка выбора: 

$('.select2')select2();

Проблема с атрибутом стиля - когда я установите этот атрибут в каждый параметр, сценарий jQuery не копирует этот атрибут для списков <li>.

Я знаю, я могу установить каждый background-color в теги <style></style>, но у меня есть больше вариантов (~ 150), и я управляю этим атрибутом (background-color) на моем сайте как живым (когда пользователь меняет некоторые параметры, я меняю цвет фона), поэтому мне нужно решение, которое будет атрибутом стиля live-copy из исходного списка параметров и когда я сбрасываю список выбора (используя $('.select2').select2()), цвет bg также будет сброшен.

Как я могу это сделать?

@ UPDATE

Я решил проблему таким образом: 

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

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

и заменяю параметры HTML код: 

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

на это: 

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

1 Ответ

1 голос
/ 05 мая 2020

На первом этапе, как вариант, вы можете определить классы и использовать их, как пример jquery ниже, с заменой .data('style') на .data('class') и style=" на class=". Затем вы можете написать это HTML

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

РЕШЕНИЕ

В противном случае вы можете создать шаблон раскрывающегося списка с опцией templateResult - вы найдете документы здесь . Основываясь на примере, которым вы поделились, я бы решил это так: 

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