Выпадающий список Bootstrap со значками
У меня есть раскрывающийся список выбора начальной загрузки, где мне нужно показать значки, как показано ниже.
<!DOCTYPE html>
<html>
<html>
<head>
<script src="/scripts/snippet-javascript-console.min.js?v=1"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3" crossorigin="anonymous"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@48,400,0,0">
<script src="/scripts/snippet-javascript-console.min.js?v=1"></script>
</head>
<body>
<div class="input-group mb-3">
<select class="form-select" id="inputGroupSelect03" aria-label="Example select with button addon">
<img src="https://img.icons8.com/offices/30/null/form.png"/>
<option selected>Choose...</option>
<img src="https://img.icons8.com/offices/30/null/form.png"/>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
</div>
</body>
</html>
Создайте ползком, похожим на звездные войны, с помощью CSS и Javascript
Если вы веб-разработчик (или хотите им стать), то вы наверняка гик и вам нравятся "Звездные войны". А как бы вы хотели, чтобы фоном для вашего...
учебник по Javascript
JavaScript - это язык программирования, который обычно используется для добавления интерактивности и других динамических функций на веб-сайты. Он...
Как использовать d3.js для рисования 2D SVG-элементов в приложении Angular?
D3.js - это обширная библиотека, используемая для привязки произвольных данных к объектной модели документа (DOM). Мы разберем основные варианты...
Освоение принципов SOLID в JavaScript: Пошаговое руководство
Принцип единой ответственности (SRP): класс должен иметь только одну причину для изменения. Другими словами, у него должна быть только одна...
JavaScript - For Loop
Наиболее используемая компактная форма оператора цикла.
Неделя 1 - Карточки с временной шкалой
Поскольку это была первая неделя, я решил начать с простого. Предполагалось, что у меня будет временная шкала с несколькими карточками, которые можно...
0
1
86
1
Перейти к ответу
Данный вопрос помечен как решенный
Ответы 1
Ответ принят как подходящий
Вот пример того, как это сделать, вы можете использовать навыки css, чтобы изменить раскрывающуюся кнопку, чтобы она выглядела как выбор, а в раскрывающемся меню вы можете исправить максимальную высоту и разрешить прокрутку переполнения, и оно будет действовать как выбор для вас.
Я добавил jquery и немного css и немного поправил ваш html. Я использовал атрибуты для выбора изображения, а затем визуализировал его с помощью jquery в пункте меню раскрывающегося списка.
Также в коде есть комментарии (надеюсь, вы чему-то научитесь из этого).
Также есть множество плагинов, которые могут делать то, что вам нужно, и даже больше.
function _smartSelectWithImage(select) {
// check if select already initialized, if it was just exit
if (select.hasClass('initialized')) return;
// hide select (d-none) and add class that we know its initialized
select.addClass('d-none initialized');
// starting creating dropdown
let d = '<div class="dropdown u008">';
d += '<button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown">Choose...</button>';
d += '<ul class="dropdown-menu">';
// looping through options of select and gather information we need
select.find('>option').each(function(){
let value = $(this).attr('value');
let image = $(this).attr('data-image');
let text = $(this).text();
// if theres value in option, create menu item for dropdown
if (typeof value!=='undefined')
d += '<li><a class="dropdown-item" href="javascript:void(0);" data-value="'+value+'"><img src="'+image+'" /> '+text+'</a></li>';
});
d += '</ul></div>';
let $html_d = $( d );
// insert our newly create html just after our select
$html_d.insertAfter(select);
// on click our item, we change our select value
// and we can simply ask our select for current selected value
$html_d.on('click', '.dropdown-menu>li', function(){
// update our select with current value
select.val($(this).find('>a').attr('data-value'));
console.log( "Selected", select.val() );
// on select, show button currently selected item
$html_d.find('>button').html( $(this).find('>a').html() );
});
}
// At dom ready we search for all selects and trigger them through our newly created function
$(function(){
$('body').find('select').each(function(){
_smartSelectWithImage($(this));
});
});.u008.dropdown { width: 100%; position: relative; }
.u008 > button,
.u008 > button:hover,
.u008 > button:focus,
.u008 > button:active {
width: 100%;
background: transparent !important;
color: #000 !important;
text-align: left;
}
.u008 > .dropdown-menu {
left: 0px !important;
max-height: 200px;
overflow-y: auto;
overflow-x: hidden;
}<!DOCTYPE html>
<html>
<html>
<head>
<script src="/scripts/snippet-javascript-console.min.js?v=1"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3" crossorigin="anonymous"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@48,400,0,0">
<script src="/scripts/snippet-javascript-console.min.js?v=1"></script>
</head>
<body>
<div class="input-group mb-3">
<select class="form-select" id="inputGroupSelect03" aria-label="Example select with button addon">
<option selected>Choose...</option>
<option value="1" data-image="https://img.icons8.com/offices/30/null/form.png">One</option>
<option value="2" data-image="https://img.icons8.com/offices/30/null/form.png">Two</option>
<option value="3" data-image="https://img.icons8.com/offices/30/null/form.png">Three</option>
</select>
</div>
</body>
</html>Другие вопросы по теме
Показать «нет результатов», если фильтр панели поиска не дал результатов (HTML-CSS-JS)
Остановить расширение аккордеона при нажатии кнопки «Дополнительно»
Невозможно обновить локальное хранилище более одного раза с помощью Reactjs
Как получить идентификатор заголовка из HTML/DOM, используя реакцию и машинописный текст
Как получить переменную GET/POST с помощью программы C++ CGI?
Как сделать ссылку для добавления списка фильтров в uBlock Origin?
Реакция: атрибут «выбранный» не работает с несколькими элементами <select>
Как анимировать линейный градиент справа вверху слева внизу?
Правильное использование семантических элементов HTML
Изменить цвет шрифта меток данных на гистограмме - chartsjs-plugin-data-labels
Похожие вопросы
React.js) React-query-devtools не работает
TypeError: x.pubkey.toBase58 не является функцией
Как проверить условие в массиве объектов
Показать «нет результатов», если фильтр панели поиска не дал результатов (HTML-CSS-JS)
Остановить расширение аккордеона при нажатии кнопки «Дополнительно»
Скопировать в буфер обмена в Discord.js
Макрос EmEditor js: можно ли подавить временные обновления в редакторе?
Как заставить среднюю группу захвата работать, когда она окружена подстановочными знаками?
Объединить дату и время без UTC
Воспроизведение видео с помощью nextjs и reactjs
вам нужен этот значок галочки или значок левой стороны листа