Bagaimana cara menambahkan gambar dalam daftar pilih?

Saya memiliki daftar jenis kelamin tertentu.

Kode:

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

Saya ingin menggunakan gambar dalam daftar drop-down sebagai drop-down-icon.jpeg.

Saya ingin menambahkan tombol di tempat ikon drop down.

Bagaimana cara melakukannya?

Di Firefox Anda bisa menambahkan gambar latar belakang ke opsi:

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

Lebih baik lagi, Anda dapat memisahkan HTML dan CSS seperti itu

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

Di browser lain , satu-satunya cara melakukannya adalah menggunakan beberapa pustaka widget JS, seperti misalnya UI jQuery , misalnya menggunakan Selectable .

Dari jQuery UI 1.11, widget Selectmenu tersedia, yang sangat dekat dengan yang Anda inginkan.

Solusi saya adalah menggunakan FontAwesome dan kemudian menambahkan gambar perpustakaan sebagai teks! Anda hanya perlu Unicodes dan ditemukan di sini: File Referensi FontAwesome forUnicodes

Berikut ini contoh filter negara:

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

Perhatikan font-family: Arial, FontAwesome; diperlukan untuk ditugaskan dalam gaya untuk pilih seperti yang diberikan dalam contoh!

Anda dapat menggunakan iconselect.js; Ikon / gambar pilih (kotak kombo, dropdown)

Demo dan unduh; http://bug7a.github.io/iconselect.js/

Penggunaan HTML;

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

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

    };

Anda sudah memiliki beberapa jawaban yang menyarankan menggunakan JavaScript / jQuery. Saya akan menambahkan alternatif yang hanya menggunakan HTML dan CSS tanpa JS.

Ide dasarnya adalah dengan menggunakan satu set tombol radio dan label (yang akan mengaktifkan / menonaktifkan tombol radio), dan dengan kontrol CSS bahwa hanya label yang terkait dengan tombol radio yang dipilih yang akan ditampilkan. Jika Anda ingin mengizinkan pemilihan beberapa nilai, Anda dapat mencapainya dengan menggunakan kotak centang alih-alih tombol radio.

Berikut ini sebuah contoh. Kode mungkin sedikit berantakan (khusus dibandingkan dengan solusi lain):

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

Solusi lintas peramban jQuery lain untuk masalah ini adalah http://designwithpc.com/Plugins/ddSlick yang dibuat untuk penggunaan ini.

Dengan negara, bahasa, atau mata uang, Anda dapat menggunakan emoji.

Bekerja dengan hampir semua browser / OS yang mendukung penggunaan 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>

Untuk gambar dua warna, Anda dapat menggunakan Fontello , dan mengimpor mesin terbang kustom apa pun yang ingin Anda gunakan. Cukup buat gambar Anda di Illustrator, simpan ke SVG, dan letakkan di situs Fontello, lalu unduh font khusus Anda yang siap diimpor. Tanpa JavaScript!

Saya mencoba beberapa jquery custom pilih berdasarkan dengan gambar, tetapi tidak ada yang bekerja di tata letak responsif. Akhirnya saya menemukan Bootstrap-Select. Setelah beberapa modifikasi saya dapat menghasilkan kode ini.

Kode dan github repo di sini

Bagi mereka yang ingin menampilkan ikon, dan menerima solusi "hitam dan putih", satu kemungkinan menggunakan entitas karakter:

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

Dengan ekstensi, ikon Anda dapat disimpan dalam font khusus. Berikut ini contoh menggunakan font FontAwesome : https://jsfiddle.net/14606fv9/2/ https://jsfiddle.net/14606fv9/2/

Satu manfaat adalah tidak memerlukan Javascript. Namun, perhatikan bahwa memuat font lengkap tidak memperlambat pemuatan halaman Anda.

Nota bene: Solusi menggunakan gambar latar belakang sepertinya tidak berfungsi lagi di Firefox (setidaknya dalam versi 57 "Quantum"):

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

Jawaban bebas Alvaros JS adalah awal yang baik bagi saya, dan saya benar-benar mencoba untuk mendapatkan jawaban yang benar-benar bebas JS yang masih memberikan semua fungsi yang diharapkan dari Select dengan gambar, tetapi sayangnya bentuk bersarang adalah down-fall. Saya memposting dua solusi di sini; solusi utama saya yang menggunakan 1 baris JavaScript, dan solusi yang sepenuhnya bebas JavaScript yang tidak akan berfungsi di dalam formulir lain, tetapi mungkin berguna untuk menu nav.

Sayangnya ada sedikit pengulangan dalam kode, tetapi ketika Anda berpikir tentang apa yang Pilih lakukan, itu masuk akal. Ketika Anda mengklik suatu opsi itu menyalin teks itu ke area yang dipilih, yaitu, mengklik 1 dari 4 opsi tidak akan mengubah 4 opsi, tetapi bagian atas sekarang akan mengulangi yang Anda klik. Untuk melakukan ini dengan gambar akan memerlukan JavaScript, atau ... Anda menduplikasi entri.

Dalam contoh saya, kami memiliki daftar game (Produk), yang memiliki versi. Setiap produk juga dapat memiliki Ekspansi, yang juga dapat memiliki versi. Untuk setiap Produk, kami memberi pengguna daftar dari setiap versi jika ada lebih dari satu, bersama dengan gambar dan teks versi spesifik.

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

Menggunakan JS untuk pemilihan kotak centang kita dapat memiliki beberapa instance pada formulir. Di sini saya telah diperluas untuk menampilkan daftar Ekspansi, yang juga memiliki logika yang sama di sekitar versi.

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

Tentu saja ini membutuhkan sedikit CSS yang adil, yang saya hanya sertakan dalam JSFiddle ini untuk mengurangi ukuran jawaban yang sudah besar ini. Saya telah menggunakan Bootstrap 4 untuk mengurangi jumlah yang dibutuhkan, dan juga untuk memungkinkannya agar cocok dengan kontrol Bootstrap lain dan setiap penyesuaian situs yang telah dibuat.

Gambar diatur ke 75px, tetapi ini dapat dengan mudah diubah dalam 5 baris .rich-selectdan.rich-select-option-body img

Saya mendapat masalah yang sama. Solusi saya adalah pendahuluan tombol radio, dengan gambar di sebelah kanannya. Karena Anda hanya dapat memilih satu opsi di radio, ini berfungsi (seperti) pilihan.

Bekerja dengan baik untukku. Semoga bisa membantu orang lain.

Ini menggunakan ms-Dropdown: https://github.com/marghoobsuleman/ms-Dropdown

Sumber data adalah json. Tapi Anda tidak perlu menggunakan json. Jika mau, Anda dapat menggunakan dengan css.

Contoh Css: https://github.com/marghoobsuleman/ms-Dropdown/tree/master/examples

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

HTML

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

Naskah

<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: Pada 2018, ini tampaknya berfungsi sekarang. Diuji di Chrome, Firefox, IE dan 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>