Добавьте иконку к select2, не основываясь на значении - PullRequest
Новая
       8

Добавьте иконку к select2, не основываясь на значении

0 голосов
/ 29 августа 2018

Я использую select2 для создания хороших выпадающих. Сейчас я ищу способ добавить значки / изображения в выпадающие элементы. Я хочу что-то вроде этого: 

<script type="text/javascript">
    $(document).ready(function() {
        $('#iconStyledDropdown').select2();
    });
</script>    

<select id="iconStyledDropdown">
    <option value="firstIcon"><span class="icon1"></span>First icon</option>
    <option value="anotherFirstIcon"><span class="icon1"></span>Another first icon</option>
    <option value="secondIcon"><span class="icon2"></span>Second icon</option>
    <option value="lastEntry"><span class="icon2"></span>Last entry</option>
</select>

Мне известна статья о шаблонах выпадающего списка , но этот стиль основан на тексте / значении опции. Мне нужен способ определения значков вручную.

1 Ответ

0 голосов
/ 29 августа 2018

Вы можете добавить class к самой опции, если это возможно. Затем вы можете использовать state.element.className, чтобы получить правильный значок 

<select id="iconStyledDropdown">
<option value="firstIcon" class="icon1">First icon</option>
<option value="anotherFirstIcon" class="icon1">Another first icon</option>
<option value="secondIcon" class="icon2">Second icon</option>
<option value="lastEntry"class="icon2">Last entry</option>

Затем измените шаблон для результатов, чтобы использовать className для получения правильного значка. 

function addIcon(option) {
  var baseUrl = "/user/pages/images/flags";
  return $('<span><img src="' + baseUrl + '/' +
            option.element.className.toLowerCase() + '.png"/> ' +
            option.text + '</span>');
}

Ваш код инициализации будет выглядеть так: 

$('#iconStyledDropdown').select2({
   templateResult: addIcon
 });
...