将图像添加到选择选项

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 ?

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

Answer 2

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.