Jawaban bebas Alvaros JS adalah awal yang baik bagi saya, dan saya benar-benar mencoba untuk mendapatkan jawaban yang benar-benar bebas JS yang masih memberikan semua fungsi yang diharapkan dari Select dengan gambar, tetapi sayangnya bentuk bersarang adalah down-fall. Saya memposting dua solusi di sini; solusi utama saya yang menggunakan 1 baris JavaScript, dan solusi yang sepenuhnya bebas JavaScript yang tidak akan berfungsi di dalam formulir lain, tetapi mungkin berguna untuk menu nav.
Sayangnya ada sedikit pengulangan dalam kode, tetapi ketika Anda berpikir tentang apa yang Pilih lakukan, itu masuk akal. Ketika Anda mengklik suatu opsi itu menyalin teks itu ke area yang dipilih, yaitu, mengklik 1 dari 4 opsi tidak akan mengubah 4 opsi, tetapi bagian atas sekarang akan mengulangi yang Anda klik. Untuk melakukan ini dengan gambar akan memerlukan JavaScript, atau ... Anda menduplikasi entri.
Dalam contoh saya, kami memiliki daftar game (Produk), yang memiliki versi. Setiap produk juga dapat memiliki Ekspansi, yang juga dapat memiliki versi. Untuk setiap Produk, kami memberi pengguna daftar dari setiap versi jika ada lebih dari satu, bersama dengan gambar dan teks versi spesifik.
<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>
}
Menggunakan JS untuk pemilihan kotak centang kita dapat memiliki beberapa instance pada formulir. Di sini saya telah diperluas untuk menampilkan daftar Ekspansi, yang juga memiliki logika yang sama di sekitar versi.
<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>
Tentu saja ini membutuhkan sedikit CSS yang adil, yang saya hanya sertakan dalam JSFiddle ini untuk mengurangi ukuran jawaban yang sudah besar ini. Saya telah menggunakan Bootstrap 4 untuk mengurangi jumlah yang dibutuhkan, dan juga untuk memungkinkannya agar cocok dengan kontrol Bootstrap lain dan setiap penyesuaian situs yang telah dibuat.
Gambar diatur ke 75px, tetapi ini dapat dengan mudah diubah dalam 5 baris .rich-selectdan.rich-select-option-body img
