Jak dodać obrazy do listy wyboru?

Mam listę wybranych płci.

Kod:

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

Chcę użyć obrazu z rozwijanej listy jako drop-down-icon.jpeg.

Chcę dodać przycisk zamiast rozwijanej ikony.

Jak to zrobić?

W Firefoksie możesz po prostu dodać obraz tła do opcji:

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

Jeszcze lepiej, możesz w ten sposób oddzielić HTML i CSS

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

W innych przeglądarkach jedynym sposobem byłoby użycie jakiejś biblioteki widżetów JS, jak na przykład jQuery UI , np. Użycie Selectable .

Od jQuery UI 1.11 dostępny jest widget Selectmenu , który jest bardzo zbliżony do tego, czego chcesz.

Moim rozwiązaniem jest użycie FontAwesome, a następnie dodanie obrazów z biblioteki jako tekstu! Potrzebujesz tylko Unicode i znajdziesz je tutaj: FontAwesome Reference File for Unicodes

Oto przykład filtru stanu:

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

Zwróć uwagę na rodzinę czcionek: Arial, FontAwesome; musi być przypisany w stylu do wyboru, jak podano w przykładzie!

Możesz użyć iconselect.js; Wybór ikony / obrazu (combobox, lista rozwijana)

Demo i pobieranie; http://bug7a.github.io/iconselect.js/

Użycie HTML;

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

Użycie 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);

    };

Masz już kilka odpowiedzi, które sugerują użycie JavaScript / jQuery. Zamierzam dodać alternatywę, która używa tylko HTML i CSS bez żadnego JS.

Podstawowym pomysłem jest użycie zestawu przycisków radiowych i etykiet (które będą aktywować / dezaktywować przyciski radiowe) oraz przy kontroli CSS, że będzie wyświetlana tylko etykieta skojarzona z wybranym przyciskiem radiowym. Jeśli chcesz zezwolić na wybieranie wielu wartości, możesz to osiągnąć, używając pól wyboru zamiast przycisków radiowych.

Oto przykład. Kod może być nieco bardziej bałaganiarski (szczególnie w porównaniu z innymi rozwiązaniami):

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

Innym rozwiązaniem tego problemu dla różnych przeglądarek jQuery jest http://designwithpc.com/Plugins/ddSlick, które jest stworzone właśnie do tego celu.

W przypadku krajów, języków lub walut możesz używać emoji.

Działa z prawie każdą przeglądarką / systemem operacyjnym obsługującym korzystanie z emoji.

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>

W przypadku obrazu dwukolorowego możesz użyć Fontello i zaimportować dowolny niestandardowy glif, którego chcesz użyć. Po prostu utwórz obraz w programie Illustrator, zapisz go w formacie SVG i upuść na stronie Fontello, a następnie pobierz niestandardową czcionkę gotową do zaimportowania. Bez JavaScript!

Wypróbowałem kilka niestandardowych opcji wyboru opartych na jquery z obrazami, ale żaden nie działał w responsywnych układach. W końcu trafiłem na Bootstrap-Select. Po pewnych modyfikacjach udało mi się stworzyć ten kod.

Kod i repozytorium github tutaj

Dla tych, którzy chcą wyświetlać ikonę i akceptują "czarno-białe" rozwiązanie, jedną z możliwości jest użycie encji znakowych:

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

Twoje ikony mogą być przechowywane w niestandardowej czcionce. Oto przykład z użyciem czcionki FontAwesome : https://jsfiddle.net/14606fv9/2/ https://jsfiddle.net/14606fv9/2/

Jedną z korzyści jest to, że nie wymaga JavaScript. Zwróć jednak uwagę, że ładowanie pełnej czcionki nie spowalnia ładowania strony.

Uwaga: rozwiązanie polegające na użyciu obrazu tła wydaje się już nie działać w przeglądarce Firefox (przynajmniej w wersji 57 „Quantum”):

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

Alvaros JS bezpłatna odpowiedź była dla mnie świetnym początkiem i naprawdę starałem się uzyskać odpowiedź naprawdę wolną od JS, która nadal zapewniałaby wszystkie funkcje oczekiwane od Select z obrazami, ale niestety zagnieżdżanie formularzy było upadkiem. Wstawiam tutaj dwa rozwiązania; moje główne rozwiązanie, które wykorzystuje 1 linię JavaScript i całkowicie wolne od JavaScript rozwiązanie, które nie będzie działać w innym formularzu, ale może być przydatne w menu nawigacyjnych.

Niestety w kodzie jest trochę powtórzeń, ale kiedy myślisz o tym, co robi Select, ma to sens. Po kliknięciu opcji kopiuje ten tekst do wybranego obszaru, tj. Kliknięcie 1 z 4 opcji nie zmieni 4 opcji, ale górna część powtórzy teraz tę, którą kliknąłeś. Aby to zrobić z obrazami wymagałoby JavaScript, lubrrr ... musisz zduplikować wpisy.

W moim przykładzie mamy listę gier (Produkty), które mają wersje. Każdy produkt może mieć również rozszerzenia, które również mogą mieć wersje. Dla każdego Produktu podajemy użytkownikowi listę każdej wersji, jeśli jest więcej niż jedna, wraz z obrazem i tekstem dotyczącym wersji.

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

Używając JS do odznaczania pola wyboru, możemy mieć wiele instancji w formularzu. Tutaj rozszerzyłem, aby wyświetlić listę rozszerzeń, które również mają tę samą logikę co do wersji.

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

Oczywiście wymaga to sporej ilości CSS, które zawarłem tylko w tym JSFiddle, aby zmniejszyć rozmiar tej i tak już ogromnej odpowiedzi. Użyłem Bootstrap 4, aby zmniejszyć potrzebną ilość, a także aby dopasować go do innych kontrolek Bootstrap i wszelkich dostosowań strony, które zostały wprowadzone.

Obrazy są ustawione na 75 pikseli, ale można to łatwo zmienić w 5 wierszach w .rich-selecti.rich-select-option-body img

Mam ten sam problem. Moim rozwiązaniem był każdy przycisk radiowy, z obrazem po prawej stronie. Ponieważ w radiu możesz wybrać tylko jedną opcję, działa to (jak).

Działa dobrze dla mnie. Mam nadzieję, że pomoże to komuś innemu.

Używa ms-Dropdown: https://github.com/marghoobsuleman/ms-Dropdown

Zasób danych to json. Ale nie musisz używać json. Jeśli chcesz, możesz użyć z css.

Przykład CSS: https://github.com/marghoobsuleman/ms-Dropdown/tree/master/examples

Przykład Json: http://jsfiddle.net/tcibikci/w3rdhj4s/6

HTML

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

Scenariusz

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

AKTUALIZACJA: od 2018 r. Wydaje się, że teraz działa. Przetestowano w Chrome, Firefox, IE i 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>