Как правильно сделать селектор языков, где в option картинки

@Mailo · Регистрация: 18.02.2010

Студворк — интернет-сервис помощи студентам

Сначала использовать обычный скрипт селекта, но в option нельзя картинки вставлять, тогда сделал просто блоками, но пока мой скрипт немного артхаусный. Подскажите как правильно его написать?

HTML5
1
2
3
4
5
6
<div class="flag_block lang_1">
    <div class="fb_popup">
        <img class="lang_1" src="https://www.cyberforum.ru/images/flag.jpg" alt="">
        <img class="lang_2" src="https://www.cyberforum.ru/images/flag_2.jpg" alt="">
    </div>
</div>

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
.flag_block{
    cursor: pointer;
    width: 124px;
    min-height: 62px;
    position: absolute;
    top: 0;
    left: -146px;
    padding: 11px 0 11px 10px;
    &.lang_1{
        background: #fff url(../images/flag.jpg) 11px 10px no-repeat;
    }
    &.lang_2{
        background: #fff url(../images/flag_2.jpg) 11px 10px no-repeat;
    }
    &:after{
        display: block;
        content: "";
        width: 0;
        height: 0;
        border-style: solid;
        border-width: 13px 12px 0 12px;
        border-color: #9c9d9d transparent transparent transparent;
        position: absolute;
        top: 24px;
        right: 8px;
    }
    img{
        display: block;
        width: 72px;
        height: 39px;
    }
}
.fb_popup{
    width: 124px;
    display: none;
    background: #fff;
    position: absolute;
    top: 60px;
    left: 0;
    padding: 10px 0 10px 11px;
    img{
        margin-bottom: 10px;
    }
}

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
$(document).ready(function() { 
 
 
    $(".flag_block").click(function() {
        $(".fb_popup").slideToggle();
    });
 
 
        $(".fb_popup img.lang_1").click(function() {
                $(".flag_block").removeClass("lang_2");
        $(".flag_block").addClass("lang_1");        
    });
    $(".fb_popup img.lang_2").click(function() {
            $(".flag_block").removeClass("lang_1");
        $(".flag_block").addClass("lang_2");        
    });
 
 
});

@rodigy · 02.08.2017, 23:18

Чтоб велосипед не изобретать, есть плагины для этого, и вставляйте туда что хотите , например FormStyler

@Mailo · 03.08.2017, 13:16 **[ТС]**

Что то не нашёл у FormStyler'а селекта с картинками.

@rodigy · 03.08.2017, 14:12

ошибся плагином, ну вот wSelect.js

@Mailo · 03.08.2017, 20:09 **[ТС]**

интересный вариант, не знал что в опшен так картинку можно запихнуть

HTML5
1
<option value="AU" data-icon="./img/AU.png">

Новые блоги и статьи Все статьи Все блоги /
PhpStorm 2025.3: WSL Terminal всегда стартует в ~ and_y87 14.12.2025 PhpStorm 2025. 3: WSL Terminal всегда стартует в ~ (home), игнорируя директорию проекта Симптом: После обновления до PhpStorm 2025. 3 встроенный терминал WSL открывается в домашней директории. . .	Access VikBal 11.12.2025 Помогите пожалуйста !! Как объединить 2 одинаковые БД Access с разными данными.	Новый ноутбук volvo 07.12.2025 Всем привет. По скидке в "черную пятницу" взял себе новый ноутбук Lenovo ThinkBook 16 G7 на Амазоне: Ryzen 5 7533HS 64 Gb DDR5 1Tb NVMe 16" Full HD Display Win11 Pro	Музыка, написанная Искусственным Интеллектом volvo 04.12.2025 Всем привет. Некоторое время назад меня заинтересовало, что уже умеет ИИ в плане написания музыки для песен, и, собственно, исполнения этих самых песен. Стихов у нас много, уже вышли 4 книги, еще 3. . .	От async/await к виртуальным потокам в Python IndentationError 23.11.2025 Армин Ронахер поставил под сомнение async/ await. Создатель Flask заявляет: цветные функции - провал, виртуальные потоки - решение. Не threading-динозавры, а новое поколение лёгких потоков. Откат?. . .
Поиск "дружественных имён" СОМ портов Argus19 22.11.2025 Поиск "дружественных имён" СОМ портов На странице: https:/ / norseev. ru/ 2018/ 01/ 04/ comportlist_windows/ нашёл схожую тему. Там приведён код на С++, который показывает только имена СОМ портов, типа,. . .	Сколько Государство потратило денег на меня, обеспечивая инсулином. Programma_Boinc 20.11.2025 Сколько Государство потратило денег на меня, обеспечивая инсулином. Вот решила сделать интересный приблизительный подсчет, сколько государство потратило на меня денег на покупку инсулинов. . . .	Ломающие изменения в C#.NStar Alpha Etyuhibosecyu 20.11.2025 Уже можно не только тестировать, но и пользоваться C#. NStar - писать оконные приложения, содержащие надписи, кнопки, текстовые поля и даже изображения, например, моя игра "Три в ряд" написана на этом. . .	Мысли в слух kumehtar 18.11.2025 Кстати, совсем недавно имел разговор на тему медитаций с людьми. И обнаружил, что они вообще не понимают что такое медитация и зачем она нужна. Самые базовые вещи. Для них это - когда просто люди. . .	Создание Single Page Application на фреймах krapotkin 16.11.2025 Статья исключительно для начинающих. Подходы оригинальностью не блещут. В век Веб все очень привыкли к дизайну Single-Page-Application . Быстренько разберем подход "на фреймах". Мы делаем одну. . .

@rodigy 90 / 40 / 17 Регистрация: 24.10.2015 Сообщений: 577
	02.08.2017, 23:18
	Чтоб велосипед не изобретать, есть плагины для этого, и вставляйте туда что хотите , например FormStyler 0

@Mailo 248 / 226 / 31 Регистрация: 18.02.2010 Сообщений: 2,312
	03.08.2017, 13:16 [ТС]
	Что то не нашёл у FormStyler'а селекта с картинками. 0

@rodigy 90 / 40 / 17 Регистрация: 24.10.2015 Сообщений: 577
	03.08.2017, 14:12
	Сообщение было отмечено Mailo как решение Решение ошибся плагином, ну вот wSelect.js 1

Как правильно сделать селектор языков, где в option картинки

Решение