Выпадающий список 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>

вам нужен этот значок галочки или значок левой стороны листа

MAYUR SANCHETI 18.11.2022 07:08
Создайте ползком, похожим на звездные войны, с помощью CSS и Javascript
Создайте ползком, похожим на звездные войны, с помощью CSS и Javascript
Если вы веб-разработчик (или хотите им стать), то вы наверняка гик и вам нравятся "Звездные войны". А как бы вы хотели, чтобы фоном для вашего...
учебник по Javascript
учебник по Javascript
JavaScript - это язык программирования, который обычно используется для добавления интерактивности и других динамических функций на веб-сайты. Он...
Как использовать d3.js для рисования 2D SVG-элементов в приложении Angular?
Как использовать d3.js для рисования 2D SVG-элементов в приложении Angular?
D3.js - это обширная библиотека, используемая для привязки произвольных данных к объектной модели документа (DOM). Мы разберем основные варианты...
Освоение принципов SOLID в JavaScript: Пошаговое руководство
Освоение принципов SOLID в JavaScript: Пошаговое руководство
Принцип единой ответственности (SRP): класс должен иметь только одну причину для изменения. Другими словами, у него должна быть только одна...
JavaScript - For Loop
JavaScript - For Loop
Наиболее используемая компактная форма оператора цикла.
Неделя 1 - Карточки с временной шкалой
Неделя 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+'" />&nbsp;'+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>

Другие вопросы по теме