Alvaros JS bezpłatna odpowiedź była dla mnie świetnym początkiem i naprawdę starałem się uzyskać odpowiedź naprawdę wolną od JS, która nadal zapewniałaby wszystkie funkcje oczekiwane od Select z obrazami, ale niestety zagnieżdżanie formularzy było upadkiem. Wstawiam tutaj dwa rozwiązania; moje główne rozwiązanie, które wykorzystuje 1 linię JavaScript i całkowicie wolne od JavaScript rozwiązanie, które nie będzie działać w innym formularzu, ale może być przydatne w menu nawigacyjnych.
Niestety w kodzie jest trochę powtórzeń, ale kiedy myślisz o tym, co robi Select, ma to sens. Po kliknięciu opcji kopiuje ten tekst do wybranego obszaru, tj. Kliknięcie 1 z 4 opcji nie zmieni 4 opcji, ale górna część powtórzy teraz tę, którą kliknąłeś. Aby to zrobić z obrazami wymagałoby JavaScript, lubrrr ... musisz zduplikować wpisy.
W moim przykładzie mamy listę gier (Produkty), które mają wersje. Każdy produkt może mieć również rozszerzenia, które również mogą mieć wersje. Dla każdego Produktu podajemy użytkownikowi listę każdej wersji, jeśli jest więcej niż jedna, wraz z obrazem i tekstem dotyczącym wersji.
<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>
}
Używając JS do odznaczania pola wyboru, możemy mieć wiele instancji w formularzu. Tutaj rozszerzyłem, aby wyświetlić listę rozszerzeń, które również mają tę samą logikę co do wersji.
<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>
Oczywiście wymaga to sporej ilości CSS, które zawarłem tylko w tym JSFiddle, aby zmniejszyć rozmiar tej i tak już ogromnej odpowiedzi. Użyłem Bootstrap 4, aby zmniejszyć potrzebną ilość, a także aby dopasować go do innych kontrolek Bootstrap i wszelkich dostosowań strony, które zostały wprowadzone.
Obrazy są ustawione na 75 pikseli, ale można to łatwo zmienić w 5 wierszach w .rich-selecti.rich-select-option-body img
