Alvaros JS свободный ответ стал для меня отличным началом, и я действительно попытался получить действительно свободный от JS ответ, который по-прежнему предоставлял все функции, ожидаемые от Select с изображениями, но, к сожалению, формы вложений были падением. Я публикую два решения здесь; мое основное решение, которое использует 1 строку JavaScript, и полностью бесплатное решение JavaScript, которое не будет работать внутри другой формы, но может быть полезно для навигационных меню.
К сожалению, в коде есть небольшое повторение, но когда вы думаете о том, что делает Select, это имеет смысл. Когда вы щелкаете опцию, она копирует этот текст в выбранную область, т. Е. Выбор 1 из 4 опций не изменит 4 опций, но верхняя часть теперь будет повторять ту, которую вы щелкнули. Для этого с изображениями потребуется JavaScript, orrrr ... вы дублируете записи.
В моем примере у нас есть список игр (продуктов), которые имеют версии. Каждый продукт может также иметь Расширения, которые также могут иметь версии. Для каждого Продукта мы даем пользователю список каждой версии, если их более одной, вместе с изображением и текстом конкретной версии.
<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>
}
Используя JS для снятия флажка, мы можем иметь несколько экземпляров в форме. Здесь я расширил список расширений, которые также имеют одинаковую логику в версиях.
<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>
Конечно, для этого требуется немало CSS, который я включил только в этот JSFiddle, чтобы уменьшить размер этого и без того массивного ответа. Я использовал Bootstrap 4, чтобы уменьшить необходимое количество, а также позволить ему вписываться в другие элементы управления Bootstrap и любые настройки сайта, которые были сделаны.
Изображения установлены на 75 пикселей, но это можно легко изменить в 5 строк .rich-selectи.rich-select-option-body img
