Как можно добавить иконки к выпадающему списку?

Question

[zeni1agent]

У меня есть вот такой выпадающий список

<form method="POST">
<select name="test">
		<option value="5" >5</option>
		<option value="10" >10</option>
		<option value="25" >25</option>
		<option value="50"  >50</option>
		<option value="100"  >100</option>	
	</select>
		<input type="submit" value="Upgrade">
</form>

И мне необходимо добавить иконки к каждой option с помощью :before
Но тег option не принимает :before
Есть ли способ создать выпадающий список с иконками?

Comments

[Дмитрий Невейков]

Можно же просто на дивах сделать. Либо добавить функцию.
$('option').each(function () {
$(this).text("Sort by: " + $(this).text());
});

Answer 1

[Максим Тимофеев]

select2.github.io/select2 и скролим до "Templating"

Comments

[Егор Скороходов]

в 2019 скидывать либу, тянущую за собой jQuery - имхо, моветон)
https://joshuajohnson.co.uk/Choices/

[Максим Тимофеев]

Егор Скороходов, Совсем не согласен.
1. Jquery еще вполне в ходу
2. Откуда Вы знаете, что у топикстартера не подключен уже Jquery
3. Раз топик топикстартер задал такой вопрос, то ES6 ему мягко говоря не о чем, так как потянет за собой не jquery, а node, webpack, babel и т.д. Тут мы можем пойти еще дальше и советовать использовать что-то типа vue. Так что Ваш совет "вредный" в данном конкретном случае. Возможно это и хорошо на будущее, но когда надо просто и сегодня - jquery плагины самое оно.
Хочу быть правильно понятым. Вы посоветовали отличный вариант, но не для этого вопроса. И он хорош, как альтернатива, а не как замена моему варианту.

[zeni1agent]

Егор Скороходов, А он принимает сторонние иконки созданные в icomoon?

[Максим Тимофеев]

zeni1agent, Там настраивается любой шаблон вывода, пихайте что угодно

[zeni1agent]

Максим Тимофеев, Как я понял function format заменяет каждый отдельный тег с выбором на другой который был вписан в return
Но у меня почему-то он его не видит.
Все остальные опций видит а эту нет.

$(document).ready(function() { 
 $("#e4").select2({
    placeholder: "Select a State",
    allowClear: true,
	 minimumInputLength: 2,
	formatResult: format,
    formatSelection: format,
    escapeMarkup: function(m) { return m; }
 }); 
	function format(ciudad) {
   return "<b class='icom-moon'>" + state.text + "</b>";
}		
		});

Можете объяснить почему?

[Максим Тимофеев]

zeni1agent,

Но у меня почему-то он его не видит.

с чего Вы так решили?

Все остальные опций видит а эту нет.

с чего Вы так решили?

Есть ошибки в консоле? Уверен, что есть так как Вы переменную state из воздуха взяли вот тут:

function format(ciudad) {
   return "<b class='icom-moon'>" + state.text + "</b>";
}

Вы передали в функцию одну переменную, а используете другую. Уверен, что в консоле красным по белому про это написано.

[zeni1agent]

Максим Тимофеев, Ошибок в консоли нет.

с чего Вы так решили?

Я это так решил поскольку даже если я напишу
return "<b class='icom-moon'>TEST</b>";
Нечего не меняется

Есть ошибки в консоле?

Ошибок нет.

Будет проще если Вы свой пример разместите на codepen или в другой песочнице

Я c радостью code Но к сожалению я до сих пор не знаю как находить прямые ссылки на файлы. Select2, jQuery. Ссылки для скачивания я нашел а для вставки в проект нет.

[Максим Тимофеев]

zeni1agent, https://codepen.io/wokster/pen/KEZNyZ

[zeni1agent]

Максим Тимофеев,
Похоже проблема была в версий Select2
Я использовал версию 4.0.6-rc.1 вместо 3.5.4
И они заметно отличаются
4.0.6-rc.1

3.5.4


Правда я так и не понял почему
Код Events конфликтует с версией 3.5.4

на 4.0.6-rc.1 такого нет

[Максим Тимофеев]

zeni1agent,

И они заметно отличаются

конечно, на то они и мажорные версии, что бы не иметь обратной совместимости.

[zeni1agent]

Максим Тимофеев, Ну так как мне использовать код Events на версий 3.5.4?
Или надо подключать обе версий для того что бы работало оба примера.

[Максим Тимофеев]

zeni1agent,
надо выбрать 1 версию и с ней работать и документацию к ней читать. Events есть и в 4.x версии: https://select2.org/programmatic-control/events

[zeni1agent]

Максим Тимофеев, Возможно вы меня неправильно поняли
Events Не работает в версий 3.5.4. Хоть я и использовал код из примеров к версий 3.5.3
А в 4.0.6-rc.1 не работает Templating.
И что мне необходимо использовать что бы работало и Events и Templating?

[Максим Тимофеев]

zeni1agent,
Еще раз!!!!

надо выбрать 1 версию и с ней работать и документацию к ней читать.

А в 4.0.6-rc.1 не работает Templating.

наверняка работает: https://select2.org/selections Просто Вы код взяли от одной версии, а подключили другую

[zeni1agent]

Хорошо я работаю в версий 3.5.4
Тогда почему не работает Events Я использую код из документаций к 3.5.3?

[Максим Тимофеев]

zeni1agent, Все я пас. Я не знаю на каком языке повторять.

надо выбрать 1 версию и с ней работать и документацию к ней читать.

К ней!!! Не к прошлой, не будущей. К конкретной. И когда не работает надо показывать код в песочнице, что бы можно было хоть что-то без гадалки сказать.

[zeni1agent]

Максим Тимофеев, Вот она https://codepen.io/zeni-agentt/pen/bZawMN Я ее вам уже давал ранее.
Я пробовал и версию 3.5.4 и 3.5.3 Они ведут себя аналогично одинаково.
И выдают одну и туже ошибку

Uncaught Error: Option 'multiple' is not allowed for Select2 when attached to a element

[Максим Тимофеев]

zeni1agent, https://codepen.io/wokster/pen/YgYxXa

[zeni1agent]

Максим Тимофеев, И что в прицепе поменялось?
Единственная разница это то что ты удалил #e5 из html блока.

[Егор Скороходов]

Максим Тимофеев, либа, которую я скинул, тянется через cdn-ки/просто файлы без npm и сборщиков. А вот на счёт jQuery сильно не согласен, но это уже дело вкуса

[Максим Тимофеев]

Егор Скороходов,

иба, которую я скинул, тянется через cdn

да, я не проверил сразу, прошу прощения за дезинформацию.

Answer 2

[Максим]

Можно стилизовать любой список под select option и поместить иконки