Alvaros JS kostenlose Antwort war ein guter Anfang für mich, und ich habe wirklich versucht, eine wirklich JS-freie Antwort zu erhalten, die immer noch alle Funktionen bietet, die von einem Select mit Bildern erwartet werden, aber leider war das Verschachteln von Formularen der Niedergang. Ich poste hier zwei Lösungen. Meine Hauptlösung, die 1 Zeile JavaScript verwendet, und eine vollständig JavaScript-freie Lösung, die in einem anderen Formular nicht funktioniert, aber für Navigationsmenüs nützlich sein kann.
Leider gibt es einige Wiederholungen im Code, aber wenn Sie darüber nachdenken, was ein Select macht, ist dies sinnvoll. Wenn Sie auf eine Option klicken, wird dieser Text in den ausgewählten Bereich kopiert. Wenn Sie also auf eine von vier Optionen klicken, werden die 4 Optionen nicht geändert. Oben wird jedoch die angeklickte Option wiederholt. Um dies mit Bildern zu tun, wäre JavaScript erforderlich, orrrr ... Sie duplizieren die Einträge.
In meinem Beispiel haben wir eine Liste von Spielen (Produkten), die Versionen haben. Jedes Produkt kann auch Erweiterungen haben, die auch Versionen haben können. Für jedes Produkt geben wir dem Benutzer eine Liste jeder Version, wenn es mehr als eine gibt, zusammen mit einem Bild und einem versionenspezifischen Text.
<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>
}
Wenn Sie JS für die Deaktivierung der Kontrollkästchen verwenden, können mehrere Instanzen in einem Formular vorhanden sein. Hier habe ich erweitert, um eine Liste von Erweiterungen anzuzeigen, die auch die gleiche Logik für Versionen haben.
<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>
Dies erfordert natürlich einiges an CSS, das ich nur in diese JSFiddle aufgenommen habe , um die Größe dieser bereits massiven Antwort zu reduzieren. Ich habe Bootstrap 4 verwendet, um die benötigte Menge zu reduzieren und um zu ermöglichen, dass es in andere Bootstrap-Steuerelemente und alle vorgenommenen Site-Anpassungen passt.
Die Bilder sind auf 75px eingestellt, dies kann jedoch leicht in 5 Zeilen in .rich-selectund geändert werden.rich-select-option-body img
