Задать вопрос
wbvetal
@wbvetal
php

Как вставить картинку в подпункты select?

Здравствуйте! Нет уже больше сил, помогите! Играюсь второй день при том - понимаю все должно быть просто до безобразия.
Имеем: 
<select id="convert-from">
<option value="usd">Доллар США </option> 
<option value="ru">Российский рубль</option>
<option value="eu">Евро</option>
</select>

имеем v1PNG_8847828_10683288.png
хочу v2PNG_3206478_10683278.png
  • Вопрос задан
  • 26072 просмотра
Комментировать
Подписаться 3 Оценить Комментировать
Решения вопроса 1
brevis
@brevis
На картинке что-то очень похожее на select2. Может и вам его использовать?
Ответ написан
2 комментария
2 комментария
Пригласить эксперта
Ответы на вопрос 3
wbvetal
@wbvetal Автор вопроса 
<head>
    <link href="select2.css" rel="stylesheet"/>
    <script src="select2.js"></script>
	<link href="bootstrap.css" rel="stylesheet"/>
    <script src="bootstrap.js"></script>
	    <script>
            function format(state) {
    if (!state.id) return state.text; // optgroup
    return "<img class='flag' src='images/flags/" + state.id.toLowerCase() + ".png'/>" + state.text;
    }
    $("#e4").select2({
    formatResult: format,
    formatSelection: format,
    escapeMarkup: function(m) { return m; }
    });
    </script>
</head>
<body>
<script>
function format(state) {
var originalOption = state.element;
 
return "<img class='flag' src='images/flags/" + state.id.toLowerCase() + ".png' alt='" + $(originalOption).data('foo') + "' />" + state.text;
}   
   </script> 
	<select>
<option value="AL" data-foo="bar">option one</option>
<option value="1" data-foo="bar">option</option>
<option value="3" data-foo="bar">option</option>
</select>
	
</body>
Ответ написан
Комментировать
Комментировать
SkaN2412
@SkaN2412
Программист, но хороший человек.
Ну это уже не селект, это элементы его заменяющие. тут нужно использовать javascript, без вариантов уже
Ответ написан
3 комментария
3 комментария
gorbulevsv
@gorbulevsv
Самоучка
Не знаю, нужно ли ещё кому? Вот нашёл в интернете такой вариант:
<select id='imgCombo' onChange="javascript: doIcon( this.value );" style="width: 65px;" class="icon">
<option style="background-image: url(imgselect/01.gif);" class="icon" value="01">2</option>
<option style="background-image: url(imgselect/02.gif);" class="icon" value="02">3</option>
<option style="background-image: url(imgselect/03.gif);" class="icon" value="03">4</option>
<option style="background-image: url(imgselect/04.gif);" class="icon" value="04">5</option>
<option style="background-image: url(imgselect/05.gif);" class="icon" value="05">4</option>
<option style="background-image: url(imgselect/06.gif);" class="icon" value="06">4</option>
</select>
Ответ написан
2 комментария
2 комментария
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
Вакансии с Хабр Карьеры
Backend-разработчик PHP
Wanted. • Москва
До 160 000 ₽
PHP разработчик
FSD
До 180 000 ₽
Junior php разработчик (laravel)
Бюро Цифровых Технологий • Санкт-Петербург
от 50 000 до 70 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Аудио-проект на Arduino для выставки
02 нояб. 2024, в 23:04
80000 руб./за проект
Настройка Mikrotik с приоритезацией трафика для игр
02 нояб. 2024, в 21:53
5000 руб./за проект
Разработать мобильное приложение (Swift)
02 нояб. 2024, в 20:34
40000 руб./за проект
Ещё заказы