If you want to customize your dropdown button to look like a select element, you can use your CSS skills to achieve that.
By setting a max-height and allowing overflow to scroll on the dropdown menu, it will behave like a select element for you.
I have made some modifications to your HTML by adding a little jQuery and CSS.
I have utilized attributes to include an image in each option, which is later displayed using jQuery in the dropdown list menu item.
There are also helpful comments in the code that may help you learn from this example.
Additionally, there are many plugins available that can provide the functionality you need and even more than that.
// JavaScript function to enhance select elements with images
function _smartSelectWithImage(select) {
// Check if select element has already been initialized
if (select.hasClass('initialized')) return;
// Hide select element and mark it as initialized
select.addClass('d-none initialized');
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">';
// Iterate through options of select element to gather necessary information
select.find('>option').each(function(){
let value = $(this).attr('value');
let image = $(this).attr('data-image');
let text = $(this).text();
// Create menu item for dropdown if option has a value
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 newly created HTML after the select element
$html_d.insertAfter(select);
// Change select value on click and update selected item display
$html_d.on('click', '.dropdown-menu>li', function(){
select.val($(this).find('>a').attr('data-value'));
console.log( "Selected", select.val() );
$html_d.find('>button').html( $(this).find('>a').html() );
});
}
// Initialize all select elements on page load
$(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>
<head>
<link href="https://cdn.jsdelivr.net/npm/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap/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">
</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>