Seçilmiş listeye nasıl resim eklenir?

Seçilmiş cinsiyetler listem var.

Kod:

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

Açılır listede açılan-icon.jpeg olarak bir resim kullanmak istiyorum.

Açılır simge yerine bir düğme eklemek istiyorum.

Bu nasıl yapılır?

In Firefox sadece seçeneğe arka plan resmi ekleyebilirsiniz:

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

Daha da iyisi, HTML ve CSS'yi bu şekilde ayırabilirsiniz

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

Gelen diğer tarayıcılar yapmanın tek yolu için örnek gibi bazı JS widget kütüphanesi kullanarak olurdu jQuery UI kullanarak örneğin Seçilebilir'i .

JQuery UI 1.11'den istediğinize çok yakın olan Selectmenu widget'ı mevcuttur.

Çözümüm FontAwesome kullanmak ve ardından kitaplık görüntülerini metin olarak eklemek! Sadece Unicodes'e ihtiyacınız var ve bunlar burada bulunuyor: FontAwesome Reference File forUnicodes

İşte örnek bir durum filtresi:

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

Not font-family: Arial, FontAwesome; örnekte verildiği gibi seçim için stilde atanması gerekir!

İconselect.js'yi kullanabilirsiniz; Simge / resim seçimi (birleşik giriş kutusu, açılır menü)

Demo ve indirme; http://bug7a.github.io/iconselect.js/

HTML kullanımı;

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

Javascript kullanımı;

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

    };

Zaten JavaScript / jQuery kullanmanızı öneren birkaç yanıtınız var. JS olmadan sadece HTML ve CSS kullanan bir alternatif ekleyeceğim.

Temel fikir, bir dizi radyo düğmesi ve etiketi (radyo düğmelerini etkinleştirecek / devre dışı bırakacak) kullanmak ve CSS kontrolü ile yalnızca seçilen radyo düğmesiyle ilişkili etiketin görüntülenmesidir. Birden fazla değer seçilmesine izin vermek istiyorsanız, bunu radyo düğmeleri yerine onay kutularını kullanarak gerçekleştirebilirsiniz.

İşte bir örnek. Kod biraz daha karmaşık olabilir (özellikle diğer çözümlerle karşılaştırıldığında):

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

Bu sorun için başka bir jQuery çapraz tarayıcı çözümü , tam olarak bu kullanım için yapılmış http://designwithpc.com/Plugins/ddSlick .

Ülkeler, diller veya para birimi ile emojiyi kullanabilirsiniz.

Emojilerin kullanımını destekleyen hemen hemen her tarayıcı / işletim sistemi ile çalışır.

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>

İki renkli bir görüntü için Fontello'yu kullanabilir ve kullanmak istediğiniz herhangi bir özel glifi içe aktarabilirsiniz. Görüntünüzü Illustrator'da oluşturun, SVG'ye kaydedin ve Fontello sitesine bırakın, ardından içe aktarmaya hazır özel yazı tipinizi indirin. JavaScript yok!

Görüntülerle birkaç jquery tabanlı özel seçim denedim, ancak hiçbiri duyarlı düzenlerde işe yaramadı. Sonunda Bootstrap-Select ile karşılaştım. Bazı değişikliklerden sonra bu kodu üretebildim.

Kod ve github deposu burada

Bir simge görüntülemek isteyen ve "siyah beyaz" bir çözümü kabul edenler için, bir olasılık karakter varlıklarını kullanmaktır:

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

Uzantı olarak, simgeleriniz özel bir yazı tipinde saklanabilir. FontAwesome yazı tipini kullanan bir örnek : https://jsfiddle.net/14606fv9/2/ https://jsfiddle.net/14606fv9/2/

Yararlarından biri, herhangi bir Javascript gerektirmemesidir. Ancak, tam yazı tipinin yüklenmesinin sayfanızın yüklenmesini yavaşlatmamasına dikkat edin.

Dikkat edilecek noktalar: Firefox'ta arka plan resmi kullanmanın çözümü artık çalışmıyor gibi görünüyor (en azından sürüm 57 "Quantum"):

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

Alvaros JS'nin ücretsiz cevabı benim için harika bir başlangıçtı ve yine de resimlerle bir Select'ten beklenen tüm işlevselliği sağlayan gerçekten JS'siz bir cevap almaya çalıştım, ancak maalesef iç içe yerleştirme formları düşüş oldu. Burada iki çözüm yazıyorum; 1 satır JavaScript kullanan ana çözümüm ve başka bir formda çalışmayan, ancak nav menüleri için faydalı olabilecek tamamen JavaScript içermeyen bir çözüm.

Maalesef kodda biraz tekrar var, ancak bir Select'in ne yaptığını düşündüğünüzde mantıklı geliyor. Bir seçeneğe tıkladığınızda, bu metni seçilen alana kopyalar, yani, 4 seçeneğin 1'ine tıklamak 4 seçeneği değiştirmez, ancak şimdi üstte tıkladığınız metni tekrarlar. Bunu resimlerle yapmak için JavaScript, orrrr gerekir ... girişleri kopyalarsınız.

Örneğimde sürümleri olan oyunların (Ürünler) bir listesi var. Her ürün ayrıca sürümlere sahip olabilen Genişlemelere sahip olabilir. Her Ürün için, kullanıcıya, birden fazla sürüm varsa her sürümün bir listesini, bir görsel ve sürüme özel bir metinle birlikte veriyoruz.

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

Onay kutusu seçimini kaldırmak için JS kullanarak bir form üzerinde birden fazla örneğe sahip olabiliriz. Burada, sürümler için aynı mantığa sahip olan Genişlemelerin bir listesini göstermek için genişlettim.

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

Tabii ki , bu zaten çok büyük olan cevabın boyutunu küçültmek için sadece bu JSFiddle'a dahil ettiğim oldukça CSS gerektiriyor . Gerekli miktarı azaltmak ve ayrıca diğer Bootstrap kontrollerine ve yapılmış herhangi bir site özelleştirmesine uymasına izin vermek için Bootstrap 4'ü kullandım.

Görüntüler 75px olarak ayarlanmıştır, ancak bu 5 satırda kolayca değiştirilebilir .rich-selectve.rich-select-option-body img

Ben de aynı sorunu yaşıyorum. Benim çözümüm, sağında resim bulunan her bir radyo düğmesi oldu. Radyoda yalnızca tek bir seçeneği seçebildiğiniz için, bir seçim gibi çalışır.

Benim için iyi çalış. Umarım başkasına yardım edebilir.

Bu ms-Dropdown kullanıyor: https://github.com/marghoobsuleman/ms-Dropdown

Veri kaynağı json. Ama json kullanmanıza gerek yok. Dilerseniz css ile kullanabilirsiniz.

Css örneği: https://github.com/marghoobsuleman/ms-Dropdown/tree/master/examples

Json Örneği: http://jsfiddle.net/tcibikci/w3rdhj4s/6

HTML

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

Senaryo

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

tam olarak bir resim değil, ancak en kolay çözümün içine bazı unicode kod eklemek olduğunu buldum, ↓ benim için harika çalışıyor

GÜNCELLEME: 2018 itibariyle, bu şimdi çalışıyor gibi görünüyor. Chrome, Firefox, IE ve Edge'de test edildi

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