Wie füge ich Bilder zur Auswahlliste hinzu?

Ich habe eine ausgewählte Liste von Geschlechtern.

Code:

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

Ich möchte ein Bild in der Dropdown-Liste als Dropdown-Symbol.jpeg verwenden.

Ich möchte anstelle des Dropdown-Symbols eine Schaltfläche hinzufügen.

Wie geht das?

In Firefox können Sie der Option einfach ein Hintergrundbild hinzufügen:

<select>
  <option style="background-image:url(male.png);">male</option>
  <option style="background-image:url(female.png);">female</option>
  <option style="background-image:url(others.png);">others</option>
</select> 

Besser noch, Sie können HTML und CSS so trennen

HTML

<select id="gender">
  <option>male</option>
  <option>female</option>
  <option>others</option>
</select>  

CSS

select#gender option[value="male"]   { background-image:url(male.png);   }
select#gender option[value="female"] { background-image:url(female.png); }
select#gender option[value="others"] { background-image:url(others.png); }

In anderen Browsern wäre die einzige Möglichkeit, dies zu tun, die Verwendung einer JS-Widget-Bibliothek, wie beispielsweise der jQuery-Benutzeroberfläche , z . B. die Verwendung von Selectable .

Ab jQuery UI 1.11 ist das Selectmenu- Widget verfügbar, das Ihren Wünschen sehr nahe kommt.

Meine Lösung besteht darin, FontAwesome zu verwenden und dann Bibliotheksbilder als Text hinzuzufügen! Sie benötigen nur die Unicodes und diese finden Sie hier: FontAwesome-Referenzdatei für Unicodes

Hier ist ein Beispiel für einen Statusfilter:

<select name='state' style='height: 45px; font-family:Arial, FontAwesome;'>
<option value=''>&#xf039; &nbsp; All States</option>
<option value='enabled' style='color:green;'>&#xf00c; &nbsp; Enabled</option>
<option value='paused' style='color:orange;'>&#xf04c; &nbsp; Paused</option>
<option value='archived' style='color:red;'>&#xf023; &nbsp; Archived</option>
</select>

Beachten Sie die Schriftfamilie: Arial, FontAwesome; muss für die Auswahl stilvoll zugewiesen werden, wie im Beispiel angegeben!

Sie können iconselect.js verwenden. Symbol- / Bildauswahl (Combobox, Dropdown)

Demo und Download; http://bug7a.github.io/iconselect.js/

HTML-Nutzung;

<div id="my-icon-select"></div>

Verwendung von Javascript;

    var iconSelect;

    window.onload = function(){

        iconSelect = new IconSelect("my-icon-select");

        var icons = [];
        icons.push({'iconFilePath':'images/icons/1.png', 'iconValue':'1'});
        icons.push({'iconFilePath':'images/icons/2.png', 'iconValue':'2'});
        icons.push({'iconFilePath':'images/icons/3.png', 'iconValue':'3'});

        iconSelect.refresh(icons);

    };

Sie haben bereits mehrere Antworten, die die Verwendung von JavaScript / jQuery vorschlagen. Ich werde eine Alternative hinzufügen, die nur HTML und CSS ohne JS verwendet.

Die Grundidee besteht darin, eine Reihe von Optionsfeldern und Beschriftungen (die die Optionsfelder aktivieren / deaktivieren) zu verwenden und mit der CSS-Steuerung nur die Beschriftung anzuzeigen, die dem ausgewählten Optionsfeld zugeordnet ist. Wenn Sie die Auswahl mehrerer Werte zulassen möchten, können Sie dies mithilfe von Kontrollkästchen anstelle von Optionsfeldern erreichen.

Hier ist ein Beispiel. Der Code kann etwas unordentlicher sein (speziell im Vergleich zu den anderen Lösungen):

.select-sim {
  width:200px;
  height:22px;
  line-height:22px;
  vertical-align:middle;
  position:relative;
  background:white;
  border:1px solid #ccc;
  overflow:hidden;
}

.select-sim::after {
  content:"▼";
  font-size:0.5em;
  font-family:arial;
  position:absolute;
  top:50%;
  right:5px;
  transform:translate(0, -50%);
}

.select-sim:hover::after {
  content:"";
}

.select-sim:hover {
  overflow:visible;
}

.select-sim:hover .options .option label {
  display:inline-block;
}

.select-sim:hover .options {
  background:white;
  border:1px solid #ccc;
  position:absolute;
  top:-1px;
  left:-1px;
  width:100%;
  height:88px;
  overflow-y:scroll;
}

.select-sim .options .option {
  overflow:hidden;
}

.select-sim:hover .options .option {
  height:22px;
  overflow:hidden;
}

.select-sim .options .option img {
  vertical-align:middle;
}

.select-sim .options .option label {
  display:none;
}

.select-sim .options .option input {
  width:0;
  height:0;
  overflow:hidden;
  margin:0;
  padding:0;
  float:left;
  display:inline-block;
  /* fix specific for Firefox */
  position: absolute;
  left: -10000px;
}

.select-sim .options .option input:checked + label {
  display:block;
  width:100%;
}

.select-sim:hover .options .option input + label {
  display:block;
}

.select-sim:hover .options .option input:checked + label {
  background:#fffff0;
}

<div class="select-sim" id="select-color">
  <div class="options">
    <div class="option">
      <input type="radio" name="color" value="" id="color-" checked />
      <label for="color-">
        <img src="http://placehold.it/22/ffffff/ffffff" alt="" /> Select an option
      </label>
    </div>
    <div class="option">
      <input type="radio" name="color" value="red" id="color-red" />
      <label for="color-red">
        <img src="http://placehold.it/22/ff0000/ffffff" alt="" /> Red
      </label>
    </div>
    <div class="option">
      <input type="radio" name="color" value="green" id="color-green" />
      <label for="color-green">
        <img src="http://placehold.it/22/00ff00/ffffff" alt="" /> Green
      </label>
    </div>
    <div class="option">
      <input type="radio" name="color" value="blue" id="color-blue" />
      <label for="color-blue">
        <img src="http://placehold.it/22/0000ff/ffffff" alt="" /> Blue
      </label>
    </div>
    <div class="option">
      <input type="radio" name="color" value="yellow" id="color-yellow" />
      <label for="color-yellow">
        <img src="http://placehold.it/22/ffff00/ffffff" alt="" /> Yellow
      </label>
    </div>
    <div class="option">
      <input type="radio" name="color" value="pink" id="color-pink" />
      <label for="color-pink">
        <img src="http://placehold.it/22/ff00ff/ffffff" alt="" /> Pink
      </label>
    </div>
    <div class="option">
      <input type="radio" name="color" value="turquoise" id="color-turquoise" />
      <label for="color-turquoise">
        <img src="http://placehold.it/22/00ffff/ffffff" alt="" /> Turquoise
      </label>
    </div>
  </div>
</div>

Eine andere browserübergreifende jQuery-Lösung für dieses Problem ist http://designwithpc.com/Plugins/ddSlick, die genau für diese Verwendung entwickelt wurde.

In Ländern, Sprachen oder Währungen können Sie Emojis verwenden.

Funktioniert mit so ziemlich jedem Browser / Betriebssystem, das die Verwendung von Emojis unterstützt.

select {
 height: 50px;
 line-height: 50px;
 font-size: 12pt;
}

<select name="countries">
    <option value="NL">🇳🇱&emsp;Netherlands</option>
    <option value="DE">🇩🇪&emsp;Germany</option>
    <option value="FR">🇫🇷&emsp;France</option>
    <option value="ES">🇪🇸&emsp;Spain</option>
</select>

<br /><br />

<select name="currency">
    <option value="EUR">🇪🇺&emsp;€&emsp;EUR&emsp;💶</option>
    <option value="GBP">🇬🇧&emsp;£&emsp;GBP&emsp;💷</option>
    <option value="USD">🇺🇸&emsp;$&emsp;USD&emsp;💵</option>
    <option value="YEN">🇯🇵&emsp;¥&emsp;YEN&emsp;💴</option>
</select>

Für ein zweifarbiges Bild können Sie Fontello verwenden und alle benutzerdefinierten Glyphen importieren, die Sie verwenden möchten. Erstellen Sie einfach Ihr Bild in Illustrator, speichern Sie es in SVG, legen Sie es auf der Fontello-Website ab und laden Sie Ihre benutzerdefinierte Schriftart zum Importieren herunter. Kein JavaScript!

Ich habe mehrere jquery-basierte benutzerdefinierte Auswahl mit Bildern ausprobiert, aber keine funktionierte in reaktionsschnellen Layouts. Endlich bin ich auf Bootstrap-Select gestoßen. Nach einigen Änderungen konnte ich diesen Code erstellen.

Code und Github Repo hier

Für diejenigen, die ein Symbol anzeigen möchten und eine "Schwarzweiß" -Lösung akzeptieren möchten, besteht eine Möglichkeit darin, Zeichenentitäten zu verwenden:

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

Durch die Erweiterung können Ihre Symbole in einer benutzerdefinierten Schriftart gespeichert werden. Hier ist ein Beispiel mit der Schriftart FontAwesome : https://jsfiddle.net/14606fv9/2/ https://jsfiddle.net/14606fv9/2/

Ein Vorteil ist, dass kein Javascript erforderlich ist. Beachten Sie jedoch, dass das Laden der vollständigen Schriftart das Laden Ihrer Seite nicht verlangsamt.

Hinweis: Die Lösung für die Verwendung eines Hintergrundbilds scheint in Firefox nicht mehr zu funktionieren (zumindest in Version 57 "Quantum"):

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

Alvaros JS kostenlose Antwort war ein guter Anfang für mich, und ich habe wirklich versucht, eine wirklich JS-freie Antwort zu erhalten, die immer noch alle Funktionen bietet, die von einem Select mit Bildern erwartet werden, aber leider war das Verschachteln von Formularen der Niedergang. Ich poste hier zwei Lösungen. Meine Hauptlösung, die 1 Zeile JavaScript verwendet, und eine vollständig JavaScript-freie Lösung, die in einem anderen Formular nicht funktioniert, aber für Navigationsmenüs nützlich sein kann.

Leider gibt es einige Wiederholungen im Code, aber wenn Sie darüber nachdenken, was ein Select macht, ist dies sinnvoll. Wenn Sie auf eine Option klicken, wird dieser Text in den ausgewählten Bereich kopiert. Wenn Sie also auf eine von vier Optionen klicken, werden die 4 Optionen nicht geändert. Oben wird jedoch die angeklickte Option wiederholt. Um dies mit Bildern zu tun, wäre JavaScript erforderlich, orrrr ... Sie duplizieren die Einträge.

In meinem Beispiel haben wir eine Liste von Spielen (Produkten), die Versionen haben. Jedes Produkt kann auch Erweiterungen haben, die auch Versionen haben können. Für jedes Produkt geben wir dem Benutzer eine Liste jeder Version, wenn es mehr als eine gibt, zusammen mit einem Bild und einem versionenspezifischen 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="[email protected]@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="[email protected]@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>
}

Wenn Sie JS für die Deaktivierung der Kontrollkästchen verwenden, können mehrere Instanzen in einem Formular vorhanden sein. Hier habe ich erweitert, um eine Liste von Erweiterungen anzuzeigen, die auch die gleiche Logik für Versionen haben.

<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="[email protected]">
            <label class="custom-control-label w-100" for="[email protected]">

                @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="[email protected]" id="[email protected]@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="[email protected]" class="rich-select-dropdown-button" />
                        <label for="[email protected]"></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="[email protected]@version.VersionId" tabindex="-1" onclick="document.getElementById('[email protected]').click();">
                                            <img src="@version.ImageUrl" alt="">@expansion.Name: @version.VersionName (@version.Year)
                                        </label>
                                    </div>
                                </div>
                            }
                        </div>
                    </div>
                }
            </label>
        </div>
    </div>

Dies erfordert natürlich einiges an CSS, das ich nur in diese JSFiddle aufgenommen habe , um die Größe dieser bereits massiven Antwort zu reduzieren. Ich habe Bootstrap 4 verwendet, um die benötigte Menge zu reduzieren und um zu ermöglichen, dass es in andere Bootstrap-Steuerelemente und alle vorgenommenen Site-Anpassungen passt.

Die Bilder sind auf 75px eingestellt, dies kann jedoch leicht in 5 Zeilen in .rich-selectund geändert werden.rich-select-option-body img

Ich habe das gleiche Problem. Meine Lösung war eine Auswahl von Optionsfeldern mit dem Bild rechts davon. Da Sie im Radio nur eine einzige Option auswählen können, funktioniert dies (wie) eine Auswahl.

Arbeite gut für mich. Hoffe, es kann jemand anderem helfen.

Dies verwendet ms-Dropdown: https://github.com/marghoobsuleman/ms-Dropdown

Datenressource ist json. Aber Sie müssen nicht json verwenden. Wenn Sie möchten, können Sie mit CSS verwenden.

CSS-Beispiel: https://github.com/marghoobsuleman/ms-Dropdown/tree/master/examples

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

HTML

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

Skript

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

UPDATE: Ab 2018 scheint dies jetzt zu funktionieren. Getestet in Chrome, Firefox, IE und Edge

<!DOCTYPE html>
<html>
<body>

<style>
select#newlocale option[value="volvo"]   { background-color: powderblue;   }
select#newlocale option[value="opel"]   { background-color: red;   }
select#newlocale option[value="audi"]   { background-color: green;   }
</style> 

<select id="newlocale">
  <option value="volvo"><div >Volvo</div></option>
  <option value="saab">Saab</option>
  <option value="opel">Opel</option>
  <option value="audi">Audi</option>
</select>

</body>
</html>