CODEWITHSUNDEEP
javascripthtml
user3410512
user3410512

Reputation: 1

Adding image to a select option

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?

Upvotes: 0

Views: 63

Answers (2)

j0hnstew
j0hnstew

Reputation: 709

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.

Upvotes: 1

TryingToImprove
TryingToImprove

Reputation: 7407

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/

Upvotes: 1

Related Questions