Alvaros JS trả lời miễn phí là một khởi đầu tuyệt vời đối với tôi và tôi thực sự đã cố gắng để có được một câu trả lời thực sự không có JS mà vẫn cung cấp tất cả các chức năng được mong đợi của Chọn với hình ảnh, nhưng các hình thức lồng nhau đáng buồn là sự thất bại. Tôi đang đăng hai giải pháp ở đây; giải pháp chính của tôi sử dụng 1 dòng JavaScript và giải pháp hoàn toàn không có JavaScript sẽ không hoạt động trong một hình thức khác, nhưng có thể hữu ích cho các menu điều hướng.
Thật không may, có một chút lặp lại trong mã, nhưng khi bạn nghĩ về những gì Chọn thì nó có ý nghĩa. Khi bạn nhấp vào một tùy chọn, nó sao chép văn bản đó vào vùng đã chọn, nghĩa là nhấp vào 1 trong 4 tùy chọn sẽ không thay đổi 4 tùy chọn, nhưng trên cùng sẽ lặp lại văn bản bạn đã nhấp. Để làm điều này với hình ảnh sẽ yêu cầu JavaScript, orrrr ... bạn sao chép các mục.
Trong ví dụ của tôi, chúng tôi có một danh sách các trò chơi (Sản phẩm), có các phiên bản. Mỗi sản phẩm cũng có thể có bản mở rộng, cũng có thể có phiên bản. Đối với mỗi Sản phẩm, chúng tôi cung cấp cho người dùng danh sách từng phiên bản nếu có nhiều hơn một, cùng với một văn bản cụ thể về hình ảnh và phiên bản.
<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>
}
Sử dụng JS cho việc bỏ qua hộp kiểm, chúng ta có thể có nhiều phiên bản trên một biểu mẫu. Ở đây tôi đã mở rộng để hiển thị một danh sách Mở rộng, cũng có logic tương tự xung quanh các phiên bản.
<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>
Tất nhiên, điều này đòi hỏi một chút CSS, điều mà tôi chỉ bao gồm trong JSFiddle này để giảm kích thước của câu trả lời đã rất lớn này. Tôi đã sử dụng Bootstrap 4 để giảm số lượng cần thiết và cũng để cho phép nó phù hợp với các điều khiển Bootstrap khác và mọi tùy chỉnh trang web đã được thực hiện.
Hình ảnh được đặt thành 75px, nhưng điều này có thể dễ dàng thay đổi trong 5 dòng trong .rich-selectvà.rich-select-option-body img
