Bootstrap 下拉菜單 select 帶圖標
[英]Bootstrap dropdown select with icons
問題描述
我有一個 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>
1 個解決方案
解決方案1
2 已采納 2022-11-18 09:02:26
這是一個如何做的例子，你可以使用 css 技能修改下拉按鈕看起來像 select，下拉菜單你可以修復最大高度並允許溢出滾動，它會為你充當 select。
我已經添加了 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>
在引導程序中切換帶有圖標的下拉菜單
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.