Below is a bootstrap fragment to setup a dropdown input with images.
<html>
<head>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<style>
.img-dropdown {
display: inline-block;
vertical-align: middle;
margin-right: 10px;
width: 20px;
height:20px;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col">
<div style="float:left">
<div class="dropdown">
<button class="btn btn-secondary" type="button" id="dropdownMenuButton"
data-bs-toggle="dropdown" aria-expanded="false">
<div id="languageButtonText">??</div>
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuButton" id="ulLanguages">
<li>
<a class="dropdown-item" href="#" data-value="DE">
<img src="img/de.svg" alt="Image 1" class="img-dropdown">
German
</a>
</li>
<li>
<a class="dropdown-item" href="#" data-value="FR">
<img src="img/fr.svg" alt="Image 2" class="img-dropdown">
French
</a>
</li>
<li>
<a class="dropdown-item" href="#" data-value="GB">
<img src="img/gb.svg" alt="Image 3" class="img-dropdown">
English
</a>
</li>
<li>
<a class="dropdown-item" href="#" data-value="NL">
<img src="img/nl.svg" alt="Image 4" class="img-dropdown">
Dutch
</a>
</li>
<li>
<a class="dropdown-item" href="#" data-value="Frisian">
<img src="img/frisian.svg" alt="Image 5" class="img-dropdown">
Frisian
</a>
</li>
</ul>
</div>
</div>
<div style="float:left">
<div id="selected-image" style="align-items: center; display:flex;margin-left:5px"></div>
</div>
</div>
</div>
</div>
</body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.0/jquery.min.js"
integrity="sha512-3gJwYpMe3QewGELv8k/BX9vcqhryRdzRMxVfq6ngyWXwo03GFEzjsUm8Q7RZcHPHksttq7/GFoxjCVUjkjvPdw=="
crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
crossorigin="anonymous"></script>
<script>
$(document).ready(function () {
// When a dropdown item is clicked
$('.dropdown-item').click(function () {
var lang = $(this).data('value');
var id = 'Language';
$('#' + id).val(lang);
// Get the image source of the clicked item
var selectedImageSrc = $(this).find('img').attr('src');
// Set the selected image in the div
$('#selected-image').html('<img src="' + selectedImageSrc + '" alt="Selected Image" width="51">');
$("#languageButtonText").html(lang);
});
$("#ulLanguages li a").filter("[data-value=" + "Frisian" + "]").trigger("click");
});
</script>
</html>
