Bootstrap 下拉菜单 select 带图标

Question

I have a bootstrap select dropdown where I need to show the icons as below sample我有一个 bootstrap select 下拉菜单，我需要在其中显示如下示例的图标

 <.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>

Answer 1

Here's an example how to do it, you can use css skills to modify dropdown button to look like select, and dropdown menu you can fix max-height and allow overflow to scroll, and it will act as select for you.这是一个如何做的例子，你可以使用 css 技能修改下拉按钮看起来像 select，下拉菜单你可以修复最大高度并允许溢出滚动，它会为你充当 select。

I've added jquery & little css and fixed just a litle of your html. I've used attributes to put image at option, and later rendered it through jquery in dropdown list menu item.我已经添加了 jquery 和小的 css 并修复了你的 html 中的一小部分。我使用属性将图像放在选项中，然后通过下拉列表菜单项中的 jquery 呈现它。

Also there are comments in code (i hope you will learn somethign from this).代码中也有注释（我希望你能从中学到一些东西）。

Also there's numerous plugins that have possibility of doing what you need and even mroe then that.还有许多插件可以满足您的需求，甚至可以满足您的需求。

 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>

Bootstrap 下拉菜单 select 带图标

问题描述

1 个解决方案

解决方案1
2 已采纳 2022-11-18 09:02:26

Bootstrap 下拉菜单 select 带图标

问题描述

1 个解决方案

解决方案1 2 已采纳 2022-11-18 09:02:26

解决方案1
2 已采纳 2022-11-18 09:02:26