title: How to add images in the options of a <select> tag using vanilla js?
body: <p>I am working with Sass and Vanilla Js. I want to know how I can make images appear before the text in a select tag:</p>
  
  <p>Something like this: <a href="https://i.stack.imgur.com/VgNTw.png" rel="nofollow noreferrer">Select with images</a></p>
  
  <p>This is an example of what I found (but uses JQuery): <a href="https://codepen.io/antonandoff/pen/PmQvBz" rel="nofollow noreferrer">https://codepen.io/antonandoff/pen/PmQvBz</a></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var langArray = [];
  $('.vodiapicker option').each(function(){
    var img = $(this).attr("data-thumbnail");
    var text = this.innerText;
    var value = $(this).val();
    var item = '&lt;li&gt;&lt;img src="'+ img +'" alt="" value="'+value+'"/&gt;&lt;span&gt;'+ text +'&lt;/span&gt;&lt;/li&gt;';
    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 = '&lt;li&gt;&lt;img src="'+ img +'" alt="" /&gt;&lt;span&gt;'+ text +'&lt;/span&gt;&lt;/li&gt;';
    $('.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]);
    
  }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.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;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;select class="vodiapicker"&gt;
              &lt;option value="en" class="test" data-thumbnail="https://upload.wikimedia.org/wikipedia/commons/thumb/3/3e/LetterA.svg/2000px-LetterA.svg.png"&gt;English&lt;/option&gt;
              &lt;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"&gt;Engllish (AU)&lt;/option&gt;
              &lt;option value="uk" data-thumbnail="https://glot.io/static/img/c.svg?etag=ZaoLBh_p"&gt;Chinese (Simplified)&lt;/option&gt;
              &lt;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"&gt;German&lt;/option&gt;
              &lt;option value="de" data-thumbnail="https://upload.wikimedia.org/wikipedia/commons/thumb/0/04/MO-supp-E.svg/600px-MO-supp-E.svg.png"&gt;Danish&lt;/option&gt;
              &lt;option value="dk" data-thumbnail="https://upload.wikimedia.org/wikipedia/commons/thumb/c/c2/F_icon.svg/267px-F_icon.svg.png"&gt;French&lt;/option&gt;
              &lt;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"&gt;Greek&lt;/option&gt;
              &lt;option value="gr" data-thumbnail="https://upload.wikimedia.org/wikipedia/commons/thumb/5/5e/4H_Emblem.svg/1000px-4H_Emblem.svg.png"&gt;Italian&lt;/option&gt;
        &lt;/select&gt;
  
  &lt;div class="lang-select"&gt;
  &lt;button class="btn-select" value=""&gt;&lt;/button&gt;
  &lt;div class="b"&gt;
  &lt;ul id="a"&gt;&lt;/ul&gt;
  &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I know that using JQuery is much easier and that there are many examples, but I want to know if it is possible to do this using pure Js (Vanilla Js)</p>