La risposta gratuita di Alvaros JS è stata un ottimo inizio per me, e ho davvero cercato di ottenere una risposta davvero priva di JS che offrisse comunque tutte le funzionalità che ci si aspettava da un Select con immagini, ma i moduli tristemente nidificati sono stati la caduta. Sto pubblicando due soluzioni qui; la mia soluzione principale che utilizza 1 riga di JavaScript e una soluzione totalmente priva di JavaScript che non funzionerà all'interno di un altro modulo, ma potrebbe essere utile per i menu di navigazione.
Sfortunatamente c'è un po 'di ripetizione nel codice, ma quando pensi a cosa fa un Select ha senso. Quando si fa clic su un'opzione, il testo viene copiato nell'area selezionata, ovvero facendo clic su 1 di 4 opzioni non si modificheranno le 4 opzioni, ma la parte superiore ora ripeterà quella su cui si è fatto clic. Per fare questo con le immagini richiederebbe JavaScript, oppure devi duplicare le voci.
Nel mio esempio abbiamo un elenco di giochi (Prodotti), che hanno versioni. Ogni prodotto può anche avere espansioni, che possono anche avere versioni. Per ogni prodotto forniamo all'utente un elenco di ogni versione se ce n'è più di una, insieme a un'immagine e testo specifico della versione.
<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>
}
Usando JS per la deselezione della casella possiamo avere più istanze su un modulo. Qui ho esteso per mostrare un elenco di espansioni, che hanno anche la stessa logica attorno alle versioni.
<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>
Naturalmente questo richiede un bel po 'di CSS, che ho incluso solo in questo JSFiddle per ridurre le dimensioni di questa risposta già enorme. Ho usato Bootstrap 4 per ridurre la quantità necessaria e anche per consentirmi di adattarsi con altri controlli Bootstrap e qualsiasi personalizzazione del sito che è stata effettuata.
Le immagini sono impostate su 75px, ma questo può essere facilmente modificato in 5 righe in .rich-selecte.rich-select-option-body img
