如何使用 vanilla js 在 <select> 标记的选项中添加图像？答案

【问题标题】：How to add images in the options of a <select> tag using vanilla js?如何使用 vanilla js 在 <select> 标记的选项中添加图像？
【发布时间】：2023-03-22 21:11:01
【问题描述】：

我正在使用 Sass 和 Vanilla Js。我想知道如何使图像出现在选择标记中的文本之前：

类似这样的：Select with images

这是我发现的一个示例（但使用 JQuery）：https://codepen.io/antonandoff/pen/PmQvBz

var langArray = [];
$('.vodiapicker option').each(function(){
  var img = $(this).attr("data-thumbnail");
  var text = this.innerText;
  var value = $(this).val();
  var item = '<li><img src="'+ img +'" alt="" value="'+value+'"/><span>'+ text +'</span></li>';
  langArray.push(item);
})

$('#a').html(langArray);


$('.btn-select').html(langArray[0]);
$('.btn-select').attr('value', 'en');


$('#a li').click(function(){
   var img = $(this).find('img').attr("src");
   var value = $(this).find('img').attr('value');
   var text = this.innerText;
   var item = '<li><img src="'+ img +'" alt="" /><span>'+ text +'</span></li>';
  $('.btn-select').html(item);
  $('.btn-select').attr('value', value);
  $(".b").toggle();

});

$(".btn-select").click(function(){
        $(".b").toggle();
    });


var sessionLang = localStorage.getItem('lang');
if (sessionLang){

  var langIndex = langArray.indexOf(sessionLang);
  $('.btn-select').html(langArray[langIndex]);
  $('.btn-select').attr('value', sessionLang);
} else {
   var langIndex = langArray.indexOf('ch');
  console.log(langIndex);
  $('.btn-select').html(langArray[langIndex]);
  
}

.vodiapicker{
  display: none; 
}

#a{
  padding-left: 0px;
}

#a img, .btn-select img{
  width: 12px;
  
}

#a li{
  list-style: none;
  padding-top: 5px;
  padding-bottom: 5px;
}

#a li:hover{
 background-color: #F4F3F3;
}

#a li img{
  margin: 5px;
}

#a li span, .btn-select li span{
  margin-left: 30px;
}

/* item list */

.b{
  display: none;
  width: 100%;
  max-width: 350px;
  box-shadow: 0 6px 12px rgba(0,0,0,.175);
  border: 1px solid rgba(0,0,0,.15);
  border-radius: 5px;
  
}

.open{
  display: show !important;
}

.btn-select{
  margin-top: 10px;
  width: 100%;
  max-width: 350px;
  height: 34px;
  border-radius: 5px;
  background-color: #fff;
  border: 1px solid #ccc;
 
}
.btn-select li{
  list-style: none;
  float: left;
  padding-bottom: 0px;
}

.btn-select:hover li{
  margin-left: 0px;
}

.btn-select:hover{
  background-color: #F4F3F3;
  border: 1px solid transparent;
  box-shadow: inset 0 0px 0px 1px #ccc;
  
  
}

.btn-select:focus{
   outline:none;
}

.lang-select{
  margin-left: 50px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select class="vodiapicker">
            <option value="en" class="test" data-thumbnail="https://upload.wikimedia.org/wikipedia/commons/thumb/3/3e/LetterA.svg/2000px-LetterA.svg.png">English</option>
            <option value="au" data-thumbnail="https://upload.wikimedia.org/wikipedia/commons/thumb/f/fb/NYCS-bull-trans-B.svg/480px-NYCS-bull-trans-B.svg.png">Engllish (AU)</option>
            <option value="uk" data-thumbnail="https://glot.io/static/img/c.svg?etag=ZaoLBh_p">Chinese (Simplified)</option>
            <option value="cn" data-thumbnail="https://upload.wikimedia.org/wikipedia/commons/thumb/3/39/NYCS-bull-trans-D.svg/2000px-NYCS-bull-trans-D.svg.png">German</option>
            <option value="de" data-thumbnail="https://upload.wikimedia.org/wikipedia/commons/thumb/0/04/MO-supp-E.svg/600px-MO-supp-E.svg.png">Danish</option>
            <option value="dk" data-thumbnail="https://upload.wikimedia.org/wikipedia/commons/thumb/c/c2/F_icon.svg/267px-F_icon.svg.png">French</option>
            <option value="fr" data-thumbnail="https://upload.wikimedia.org/wikipedia/commons/thumb/5/53/Google_%22G%22_Logo.svg/2000px-Google_%22G%22_Logo.svg.png">Greek</option>
            <option value="gr" data-thumbnail="https://upload.wikimedia.org/wikipedia/commons/thumb/5/5e/4H_Emblem.svg/1000px-4H_Emblem.svg.png">Italian</option>
      </select>

<div class="lang-select">
<button class="btn-select" value=""></button>
<div class="b">
<ul id="a"></ul>
</div>
</div>

我知道使用 JQuery 要容易得多，并且有很多示例，但我想知道是否可以使用纯 Js（Vanilla Js）来做到这一点

【问题讨论】：

这不是 Codepen 中的 <select> 元素，而是样式化的 <ul>。
选择选项除了文本不能有任何内容。在示例中，他使用了
的样式
最好实现自己的小部件，该小部件的作用与使用 HTML 和 JavaScript 的选择选项完全一样。看看这个stackoverflow.com/questions/1697996/image-in-select-element
编辑了我的答案，还使用按钮和列表提供了模拟的选择/选项功能。我相信它可以实现您想要实现的目标。

标签： javascript html css sass

【解决方案1】：

您应该使用列表而不是<select> / <option>，然后您可以在数据属性中设置您的图像来源。然后，您可以简单地查询列表类中的所有 <li> 元素（或者，更好的是，为每个列表项添加一个类），并将 innerHTMl 值设置为您想要的值。

要模拟选择/选项的行为，您需要实现自己的onclick 事件，这将设置选择按钮的值并替换选择的内容。

请参阅下面的工作示例。

const list = document.getElementById('vodiapicker');
const listElements = list.querySelectorAll('li');
const selectButton = document.getElementById("btn-select");

// build list
listElements.forEach((element) => {
  // set image
  element.innerHTML = `<img src="${element.getAttribute('data-thumbnail')}"/> <span>${element.innerText}</span>`;
  
  // change current selection on click on item
  element.onclick = () => {
    // hide selection list
    list.style.display = 'none';
    
    // set selected
    selectButton.setAttribute('value', element.getAttribute('value'));
    selectButton.innerHTML = element.outerHTML;
  };
});

// set the button to first element initially
selectButton.innerHTML = listElements[0].outerHTML;
selectButton.setAttribute('value', listElements[0].getAttribute('value'));

// toggle list visibility on button click
selectButton.onclick = () => {
  list.style.display = list.style.display === 'block' ? 'none' : 'block';
};

#vodiapicker {  
  /* hide initially */
  display: none;
}

#vodiapicker li {
  cursor: pointer;
  
  /* don't display the bullet for this list */
  list-style: none;
}

#vodiapicker li img {
  width: 12px;
}

#btn-select {
  cursor: pointer;
  list-style: none;
}

#btn-select img {
  width: 12px;
}

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  
  <title>JS Bin</title>
</head>
<body>
  <!-- select button -->
  <button id="btn-select" value=""></button>
  
  <!-- option list -->
  <ul id="vodiapicker">
    <li value="en" data-thumbnail="https://upload.wikimedia.org/wikipedia/commons/thumb/3/3e/LetterA.svg/2000px-LetterA.svg.png">English</li>
    <li value="au" data-thumbnail="https://upload.wikimedia.org/wikipedia/commons/thumb/f/fb/NYCS-bull-trans-B.svg/480px-NYCS-bull-trans-B.svg.png">Engllish (AU)</li>
    <li value="uk" data-thumbnail="https://glot.io/static/img/c.svg?etag=ZaoLBh_p">Chinese (Simplified)</li>
    <li value="cn" data-thumbnail="https://upload.wikimedia.org/wikipedia/commons/thumb/3/39/NYCS-bull-trans-D.svg/2000px-NYCS-bull-trans-D.svg.png">German</li>
    <li value="de" data-thumbnail="https://upload.wikimedia.org/wikipedia/commons/thumb/0/04/MO-supp-E.svg/600px-MO-supp-E.svg.png">Danish</li>
    <li value="dk" data-thumbnail="https://upload.wikimedia.org/wikipedia/commons/thumb/c/c2/F_icon.svg/267px-F_icon.svg.png">French</li>
    <li value="fr" data-thumbnail="https://upload.wikimedia.org/wikipedia/commons/thumb/5/53/Google_%22G%22_Logo.svg/2000px-Google_%22G%22_Logo.svg.png">Greek</li>
    <li value="gr" data-thumbnail="https://upload.wikimedia.org/wikipedia/commons/thumb/5/5e/4H_Emblem.svg/1000px-4H_Emblem.svg.png">Italian</li>
  </ul>
</body>
</html>

【讨论】：

【解决方案2】：

您可以将 javascript 下拉菜单与图像一起使用，例如：https://selectron23.pluginus.net/ - 完全可配置，无需 jQuery（纯 js）

【讨论】：