Adding image to a select option

Question

I am using document.createElement('option') in otion.text. I need to append image with text.

Below is how I am doing it, without much success:

var mySelect = document.getElementById('mySelect'),
    newOption = document.createElement('option');

newOption.value = 'bmw';

if (typeof newOption.innerText === 'undefined') {
    newOption.textContent = 'BMW' < img src = "https://fbcdn-profile-a.akamaihd.net/hprofile-ak-ash1/t5/27599546049768_1093999943_q.jpg" > ;
} else {
    newOption.innerText = 'BMW' < img src = "https://fbcdn-profile-a.akamaihd.net/hprofile-ak-ash1/t5/27599546049768_1093999943_q.jpg" > ;
}

mySelect.appendChild(newOption);

and my HTML is:

<select id="mySelect">

</select>

How to add image and text to newOption.innerText?

score 1 · Answer 1 · answered Mar 14 '14 at 12:48

1

You can't display images in a <option></option> you should take a look at a plugin for this; maybe take a look at this: http://tympanus.net/codrops/2012/10/04/custom-drop-down-list-styling/

answered Mar 14 '14 at 12:48

TryingToImprove

7,047
4
30
39

score 1 · Answer 2 · edited May 23 '17 at 10:33

1

As TryingToImprove said you cannot display images inside <option> but you also have another problem. You are not putting your strings together correctly. Regardless, this has already been answered SO located here. Hope this helps.

edited May 23 '17 at 10:33

Community

1
1

answered Mar 14 '14 at 12:57

j0hnstew

709
8
25

Adding image to a select option

2 Answers2