how to add image in select list or options drop down in html

 

how to add image in select list or options html

how to add image in select list or options  drop down in html

Example Code: https://stackoverflow.com/questions/2965971/how-to-add-images-in-select-list

Example Code: https://learnbatta.com/blog/how-to-add-image-in-select-options-html-93/

select {
 height: 50px;
 line-height: 50px;
 font-size: 12pt;
}

<select name="countries">
    <option value="NL">🇳🇱&emsp;Netherlands</option>
    <option value="DE">🇩🇪&emsp;Germany</option>
    <option value="FR">🇫🇷&emsp;France</option>
    <option value="ES">🇪🇸&emsp;Spain</option>
</select>

<br /><br />

<select name="currency">
    <option value="EUR">🇪🇺&emsp;€&emsp;EUR&emsp;💶</option>
    <option value="GBP">🇬🇧&emsp;£&emsp;GBP&emsp;💷</option>
    <option value="USD">🇺🇸&emsp;$&emsp;USD&emsp;💵</option>
    <option value="YEN">🇯🇵&emsp;¥&emsp;YEN&emsp;💴</option>
</select>

we can add animage in select options in html. but, we cannot directly achieve it with the HTML alone. To display the images in the select drop-down we have to use javascript libraries. We can add an image in select options using "select2" jQuery library.

what select2 can provide us?

select2 provides the same functionality as normal html select.

select2 has searching and tagging capability which is one of the best features.

The most interesting thing is its API. By using the select2 API we can customize its representation or behavior.

We use the select2 API to add our functionality. Select2 API provides us two functions "templateResult" and "templateSelection". We utilize these two functions to create our custom html (i.e. images in selection) drop down selection with images.

Example Code:

Let's write code to add an image in select options drop down.

HOME