Comment ajouter une image dans une liste de sélection

Question

J'ai une liste sélective de genres.

Code :

<select>
<option>male</option>
<option>female</option>
<option>others</option>
</select>  

Je veux utiliser une image dans la liste déroulante comme drop-down-icon.jpeg.

Je veux ajouter un bouton à la place de l'icône de la liste déroulante.

Comment faire ?

Answer 1

Une autre solution jQuery pour le croisement des navigateurs pour ce problème est http://designwithpc.com/Plugins/ddSlick qui est fait exactement pour cet usage.

Answer 2

Ceci est en utilisant ms-Dropdown : https://github.com/marghoobsuleman/ms-Dropdown

La ressource de données est json. Mais vous n'êtes pas obligé d'utiliser json. Si vous voulez, vous pouvez l'utiliser avec css.

Exemple css : https://github.com/marghoobsuleman/ms-Dropdown/tree/master/examples

Exemple Json : http://jsfiddle.net/tcibikci/w3rdhj4s/6

HTML

<div id="byjson"></div>

script

<script>
        var jsonData = [
            {description:'Choos your payment gateway', value:'', text:'Payment Gateway'},
            {image:'https://via.placeholder.com/50', description:'My life. My card...', value:'amex', text:'Amex'},
            {image:'https://via.placeholder.com/50', description:'It pays to Discover...', value:'Discover', text:'Discover'},
            {image:'https://via.placeholder.com/50', title:'For everything else...', description:'For everything else...', value:'Mastercard', text:'Mastercard'},
            {image:'https://via.placeholder.com/50', description:'Sorry not available...', value:'cash', text:'Cash on devlivery', disabled:true},
            {image:'https://via.placeholder.com/50', description:'All you need...', value:'Visa', text:'Visa'},
            {image:'https://via.placeholder.com/50', description:'Pay and get paid...', value:'Paypal', text:'Paypal'}
        ];
        $("#byjson").msDropDown({byJson:{data:jsonData, name:'payments2'}}).data("dd");
    }
</script>

Answer 3

Pour ceux qui souhaitent afficher une icône, et qui acceptent une solution "noir et blanc", une possibilité est d'utiliser des entités de caractères :

   <select>
      <option>100 &euro;</option>
      <option>89 &pound;</option>
    </select>

Par extension, vos icônes peuvent être stockées dans une police personnalisée. Voici un exemple utilisant la police FontAwesome : https://jsfiddle.net/14606fv9/2/ https://jsfiddle.net/14606fv9/2/

L'un de ses avantages est qu'il ne nécessite aucun Javascript. Toutefois, veillez à ce que le chargement de la police complète ne ralentisse pas le chargement de votre page.

Nota bene : La solution consistant à utiliser une image de fond ne semble plus fonctionner dans Firefox (du moins dans la version 57 "Quantum") :

<select>
  <option style="background-image:url(euro.png);">100</option>
  <option style="background-image:url(pound.png);">89</option>
</select>

Answer 4

Pour une image en deux couleurs, vous pouvez utiliser Fontello et importez tout glyphe personnalisé que vous souhaitez utiliser. Il suffit de créer votre image dans Illustrator, de l'enregistrer au format SVG et de la déposer sur le site de Fontello, puis de télécharger votre police personnalisée prête à être importée. Pas de JavaScript !

Answer 5

Réponse libre d'Alvaros JS était un bon début pour moi, et j'ai vraiment essayé d'obtenir une réponse vraiment sans JS qui offrait encore toutes les fonctionnalités attendues d'un Select avec des images, mais malheureusement l'imbrication des formulaires était la chute. Je poste deux solutions ici ; ma solution principale qui utilise 1 ligne de JavaScript, et une solution totalement sans JavaScript qui ne fonctionnera pas à l'intérieur d'un autre formulaire, mais qui pourrait être utile pour les menus de navigation.

Malheureusement, il y a un peu de répétition dans le code, mais quand vous pensez à ce que fait un Select, cela a du sens. Lorsque vous cliquez sur une option, le texte est copié dans la zone sélectionnée, c'est-à-dire que si vous cliquez sur une option parmi 4, les 4 options ne seront pas modifiées, mais la partie supérieure répétera celle sur laquelle vous avez cliqué. Pour faire cela avec des images, il faudrait du JavaScript, ou bien... vous dupliquez les entrées.

Dans mon exemple, nous avons une liste de jeux (produits), qui ont des versions. Chaque produit peut aussi avoir des extensions, qui peuvent aussi avoir des versions. Pour chaque produit, nous donnons à l'utilisateur une liste de chaque version s'il y en a plus d'une, avec une image et un texte spécifique à la version.

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

En utilisant JS pour la désélection de la case à cocher, nous pouvons avoir plusieurs instances sur un formulaire. Ici, j'ai élargi pour montrer une liste d'extensions, qui ont également la même logique autour des 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>

Bien sûr, cela nécessite un peu de CSS, que je n'ai inclus que dans la section ce JSFiddle pour réduire la taille de cette réponse déjà massive. J'ai utilisé Bootstrap 4 pour réduire la quantité nécessaire, et aussi pour lui permettre de s'adapter aux autres contrôles Bootstrap et à toute personnalisation du site qui a été faite.

Les images sont définies à 75px, mais cela peut facilement être modifié en 5 lignes dans le fichier .rich-select et .rich-select-option-body img