How to Have an Image Come Up if an Option Is Selected in Html

Alvaros JS free answer was a great start for me, and I really tried to get a truly JS-free answer that still delivered all the functionality expected of a Select with images, but sadly nesting forms was the down-fall. I'm posting two solutions here; my main solution that uses 1 line of JavaScript, and a totally JavaScript-free solution that won't work inside another form, but might be useful for nav menus.

Unfortunately there is a bit of repetition in the code, but when you think about what a Select does it makes sense. When you click on an option it copies that text to the selected area, i.e., clicking 1 of 4 options will not change the 4 options, but the top will now repeat the one you clicked. To do this with images would require JavaScript, orrrr... you duplicate the entries.

In my example we have a list of games (Products), which have versions. Each product may also have Expansions, which can also have versions. For each Product we give the user a list of each version if there's more than one, along with an image and version specific text.

          <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> }                  

Using JS for the checkbox deselection we can have multiple instances on a form. Here I've extended to show a list of Expansions, which also have the same logic around versions.

          <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>                  

Of course this requires a fair bit of CSS, which I've only included in this JSFiddle to reduce the size of this already massive answer. I've used Bootstrap 4 to reduce the amount needed, and also to allow it to fit in with other Bootstrap controls and any site customisations that have been made.

The images are set to 75px, but this can easily be changed in 5 lines in .rich-select and .rich-select-option-body img

How to Have an Image Come Up if an Option Is Selected in Html

Source: https://stackoverflow.com/questions/2965971/how-to-add-images-in-select-list

Share this post