在html

Question

以静态下拉菜单显示图像。我需要显示带有文本的图像，但无法显示带有文本的图像。

我有一个静态下拉菜单，需要显示带有文本的图像，因此以这种格式添加，但是它不显示图像。

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

Answer 1

您可以使用<ul> <li>菜单实现这一点，我在下面添加了代码段

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>