Безкоштовна відповідь 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
