Displaying thumbnail or icon images in static dropdown in html

Question

Displaying images in static dropdown .I need to display images with text but unable to display the images with text.

I have a static dropdown need to display images with text as well so added in this format but it's not displaying the images..

<select>
  <option data-class="avatar" data-style="background-image:url(http://localhost/rda/assets/language-switcher/gb.png);" id="English" onclick="translateLanguage(this.id);"  selected><img src="http://localhost/rda/assets/language-switcher/gb.png" alt="" />&nbsp; English</option>
   <option data-class="avatar" data-style="background-image:url(http://localhost/rda/assets/language-switcher/fr.png);" id="French" onclick="translateLanguage(this.id);" >French</option>
   <option data-class="avatar" data-style="background-image:url(http://localhost/rda/assets/language-switcher/de.png);" id="German" onclick="translateLanguage(this.id);" >German</option>
   <option data-class="avatar" data-style="background-image:url(http://localhost/rda/assets/language-switcher/it.png);" id="Italian" onclick="translateLanguage(this.id);">Italian</option>
    <option data-class="avatar" data-style="background-image:url(http://localhost/rda/assets/language-switcher/es.png);" id="Spanish" onclick="translateLanguage(this.id);">Spanish</option>
    </select>

Did you try wrapping divs around the option and putting the images as backgrounds using inline styles? — Vappor Washmade, Mar 21 '19 at 05:15
I think you need jQuery to show image in dropdown list. See this question https://stackoverflow.com/questions/43406630/want-to-show-image-icons-in-dropdown-list — Ryuujo, Mar 21 '19 at 05:17
@VapporWashmade i have by adding them using css and writing as inline as well followed in google — tester, Mar 21 '19 at 05:21
Possible duplicate of [want to show image/icons in dropdown list](https://stackoverflow.com/questions/43406630/want-to-show-image-icons-in-dropdown-list) — ADH - THE TECHIE GUY, Mar 21 '19 at 06:11

ADH - THE TECHIE GUY · Answer 1 · 2019-03-21T05:37:53.180

you can achieve that using an <ul> <li> menu ,I added the snippet below

function getElement(elm){
    return document.getElementById(elm);
}
/*--------------FUNCTION TO HIDE AN ELEMENT-------------------*/
function hide(elm){
    return getElement(elm).classList.add("none");
}
//===============================================================//
/*-------------FUNCTION TO DISPLAY AN ELEMENT------------------*/
function show(elm){
    return getElement(elm).classList.remove("none");
}
//===============================================================//
getElement('menu-button').addEventListener('click',function(){

  show('menu');
});

ul,li{
 list-style:none;
 padding:0px;
 }
 ul{
  width:100px;
  
 }
 
.none{
  display:none;
}
 li{
  cursor:pointer;
   border:1px solid #000;
   text-align:center;
   padding:5px;
   opacity:0.8;
 }
 li:hover{
  opacity:1;
  color:#fff;
  }
  
 span#menu-button{
  border:1px solid #000;
  background:blue;
  color:#fff;
  padding:5px;
  cursor:pointer;
 }

<span id="menu-button">English</span>
<ul id="menu" class="none">
  <li style="background-image:url(https://www.w3schools.com/html/pic_trulli.jpg);" id="English"onclick="translateLanguage(this.id);"selected>English</li>
  <li style="background-image:url(https://www.w3schools.com/html/img_girl.jpg);" id="French"onclick="translateLanguage(this.id);">French</li>
  <li style="background-image:url(https://www.w3schools.com/html/img_chania.jpg);" id="German"onclick="translateLanguage(this.id);">German</li>
  
</ul>

But i need them to display in dropdown it is displaying by using ul and li tag but i want it in dropdown — tester, Mar 21 '19 at 05:32
yes i know its working like that only but why it is not working with dropdown select option — tester, Mar 21 '19 at 05:47

Displaying thumbnail or icon images in static dropdown in html

1 Answers1