Réponse gratuite Alvaros JS été un bon début pour moi, et j'ai vraiment essayé d'obtenir une réponse vraiment sans JS qui fournissait toujours toutes les fonctionnalités attendues d'un Select avec des images, mais malheureusement, l'imbrication des formulaires a été la chute. Je poste deux solutions ici; ma solution principale qui utilise 1 ligne de JavaScript, et une solution totalement sans JavaScript qui ne fonctionnera pas dans un autre formulaire, mais pourrait être utile pour les menus de navigation.
Malheureusement, il y a un peu de répétition dans le code, mais quand vous pensez à ce qu'est un Select, cela a du sens. Lorsque vous cliquez sur une option, il copie ce texte dans la zone sélectionnée, c'est-à-dire que cliquer sur 1 des 4 options ne changera pas les 4 options, mais le haut répètera maintenant celle sur laquelle vous avez cliqué. Pour ce faire avec des images, il faudrait JavaScript, orrrr ... vous dupliquez les entrées.
Dans mon exemple, nous avons une liste de jeux (Produits), qui ont des versions. Chaque produit peut également avoir des extensions, qui peuvent également avoir des versions. Pour chaque produit, nous donnons à l'utilisateur une liste de chaque version s'il y en a plus d'une, avec une image et un texte spécifique à la version.
<h4>@Model.Name</h4>
@if (Model.Versions.Count == 1)
{
<div class="rich-select-option-body pl-2">
<img src="@Model.Versions[0].ImageUrl" alt="">@Model.Versions[0].VersionName (@Model.Versions[0].Year)
</div>
}
else
{
<h5>Select the version</h5>
<div class="rich-select custom-select">
<div class="rich-select-dropdown">
@foreach (var version in Model.Versions)
{
<div class="rich-select-option">
<input type="radio" name="game" id="game-@version.ProductId-@version.VersionId" @if (version == Model.Versions.First()) { @Html.Raw(" checked") ; } />
<div class="rich-select-option-body">
<label tabindex="-1">
<img src="@version.ImageUrl" alt="">@version.VersionName (@version.Year)
</label>
</div>
</div>
}
</div>
<input type="checkbox" id="rich-select-dropdown-button" class="rich-select-dropdown-button" />
<label for="rich-select-dropdown-button"></label>
<div class="rich-select-options">
@foreach (var version in Model.Versions)
{
<div class="rich-select-option">
<div class="rich-select-option-body">
<label for="game-@version.ProductId-@version.VersionId" tabindex="-1" onclick="document.getElementById('rich-select-dropdown-button').click();">
<img src="@version.ImageUrl" alt=""> @version.VersionName (@version.Year)
</label>
</div>
</div>
}
</div>
</div>
}
En utilisant JS pour la désélection de la case à cocher, nous pouvons avoir plusieurs instances sur un formulaire. Ici, j'ai étendu pour afficher une liste d'extensions, qui ont également la même logique autour des versions.
<h5 class="mt-3">Include Expansions?</h5>
@foreach (var expansion in Model.Expansions)
{
<div class="form-row">
<div class="custom-control custom-checkbox w-100">
<input type="checkbox" class="expansion-checkbox custom-control-input" id="exp-@expansion.ProductId">
<label class="custom-control-label w-100" for="exp-@expansion.ProductId">
@if (expansion.Versions.Count == 1)
{
<div class="rich-select-option-body pl-2">
<img src="@expansion.ImageUrl" />@expansion.Name: @expansion.Versions[0].VersionName (@expansion.Versions[0].Year)
</div>
}
else
{
<div class="rich-select custom-select">
<div class="rich-select-dropdown">
@foreach (var version in expansion.Versions)
{
<div class="rich-select-option">
<input type="radio" name="exp-@version.ProductId" id="exp-@version.ProductId-@version.VersionId" @if (version == expansion.Versions.First()) { @Html.Raw(" checked") ; } />
<div class="rich-select-option-body">
<label tabindex="-1">
<img src="@version.ImageUrl" alt="">@expansion.Name: @version.VersionName (@version.Year)
</label>
</div>
</div>
}
</div>
<input type="checkbox" id="rich-select-dropdown-button-@expansion.ProductId" class="rich-select-dropdown-button" />
<label for="rich-select-dropdown-button-@expansion.ProductId"></label>
<div class="rich-select-options">
@foreach (var version in expansion.Versions)
{
<div class="rich-select-option">
<div class="rich-select-option-body">
<label for="exp-@version.ProductId-@version.VersionId" tabindex="-1" onclick="document.getElementById('rich-select-dropdown-button-@expansion.ProductId').click();">
<img src="@version.ImageUrl" alt="">@expansion.Name: @version.VersionName (@version.Year)
</label>
</div>
</div>
}
</div>
</div>
}
</label>
</div>
</div>
Bien sûr, cela nécessite un peu de CSS, que je n'ai inclus dans ce JSFiddle que pour réduire la taille de cette réponse déjà massive. J'ai utilisé Bootstrap 4 pour réduire la quantité nécessaire et pour lui permettre de s'intégrer avec d'autres contrôles Bootstrap et toutes les personnalisations de site qui ont été effectuées.
Les images sont réglées à 75px, mais cela peut facilement être changé en 5 lignes dans .rich-selectet.rich-select-option-body img
