Stack Overflow
Stack Overflow

How to add images in the options of a ` element in the Codepen, it's a styled `
    `.
– David Thomas Nov 25 '19 at 20:25

  • 1
    select option can't have anything except text. In the example he is using a
      , and had gave it a style like a select
     – Alberto Sinigaglia Nov 25 '19 at 20:27
  • It is better if you implement your own widget that acts exactly like a select option using HTML and JavaScript. Check this one out https://stackoverflow.com/questions/1697996/image-in-select-element – Armedin Kuka Nov 25 '19 at 20:31
  • edited my answer to also provide the simulated select/option functionality using a button and a list. i believe it does what you want to achieve. – szaman Nov 26 '19 at 12:35

    • 2 Answers2

    0

    You should use a list instead of <select> / <option>, then you can set your image source in the data attributes. Then you can simply query all <li> elements inside your list class (or, better yet, add a class to each list item), and set the innerHTMl value to be what you want.

    To simulate the behaviour of select/option, you will need to implement your own onclick events, which will set the value of the select button and replace the selected content.

    See working example below.

    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>
    szaman
    • 2,159
    • 1
    • 14
    • 30
    0

    You can use javascript dropdown with images, for example: https://selectron23.pluginus.net/ - fully configurable, no jQuery (pure js)

    realmag777
    • 2,050
    • 1
    • 24
    • 22