Insert Image in Dropdown Lists with jQuery

In HTML it is not possible to add an element to the dropdown list. You need to customize it.

For example –

If you try to add a search box in an <option> or add a country flag image following with country name. When you run it you don’t see any changes in the dropdown.

This can simply be done with the jQuery plugins which adds more features to the simple dropdown element.

In this tutorial, I show how you can insert an image in the dropdown with select2 and Easyautocomplete plugins.

Insert Image in Dropdown lists with jQuery

Download

Select2
Easyautocomplete
Conclusion

1. Select2

This plugin replaces your simple dropdown with a customizable and user-friendly element.

Steps

Download select2 jQuery plugin from here and include select2.min.css and select2.min.js in your file.

<link href='select2.min.css' rel='stylesheet' type='text/css'>
<script src='select2.min.js'></script>

Or you can use select2 CDN

<link href='https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css' rel='stylesheet' type='text/css'>
<scirpt src='https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css'></script>

Create your Dropdown and add some options.

<select id='social' style='width: 200px;'>
 <option value='facebook'>Facebook</option>
 <option value='twitter'>Twitter</option>
 <option value='linkedin'>Linkedin</option>
 <option value='google_plus'>Google Plus</option>
 <option value='vimeo'>Vimeo</option>
</select>

Call select2() method on the dropdown and set Template with templateResult property. Specify function-name in templateResult.

Specified function in templateResult executes for each option, using this to set image.

I have set the image’s name similar to the option value e.g. facebook.png, twitter.png, linkedin.png, etc.

$(document).ready(function(){
 $("#social").select2({
  templateResult: formatOptions
 });
});
 
function formatOptions (state) {
  if (!state.id) { return state.text; }
   var $state = $(
   '<span ><img sytle="display: inline-block;" src="images/' + state.element.value.toLowerCase() + '.png" /> ' + state.text + '</span>'
  );
  return $state;
}

Completed Code

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

<!-- select2 css -->
<link href='select2/dist/css/select2.min.css' rel='stylesheet' type='text/css'>

<!-- select2 script -->
<script src='select2/dist/js/select2.min.js'></script>
 
<script>
 $(document).ready(function(){
  $("#social").select2({
   templateResult: formatState
  });
 });
 
 function formatState (state) {
  if (!state.id) { return state.text; }
  var $state = $(
   '<span ><img sytle="display: inline-block;" src="images/' + state.element.value.toLowerCase() + '.png" /> ' + state.text + '</span>'
  );
  return $state;
 }
</script>

<select id='social' style='width: 200px;'>
 <option value='facebook'>Facebook</option>
 <option value='twitter'>Twitter</option>
 <option value='linkedin'>Linkedin</option>
 <option value='google_plus'>Google Plus</option>
 <option value='vimeo'>Vimeo</option>
</select>

View Demo

2. Easyautocomplete

This is an auto-completer jQuery plugin that you can use as a replacement for dropdown.

Steps

Download and include easy-autocomplete.min.css and jquery.easy-autocomplete.min.js in your file.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

<!-- EasyAutocomplete css -->
<link href='easy-autocomplete.min.css' rel='stylesheet' type='text/css'>

<!-- EasyAutocomplete script -->
<script src='jquery.easy-autocomplete.min.js'></script>

Create an input element

<input type='text' id='social'>

Initialize easyautocomplete and set JSON object. Specify your data and icon in data property.

<script>
$(document).ready(function(){
 var options = {
  data: [ {name: "Facebook", icon: "images/facebook.png"},
   {name: "Twitter", icon: "images/twitter.png"},
   {name: "Linkedin", icon: "images/linkedin.png"},
   {name: "Google Plus", icon: "images/google_plus.png"},
   {name: "Vimeo", icon: "images/vimeo.png"}],
   getValue: 'name',
   template: {
    type: "iconLeft",
    fields: {
    iconSrc: "icon"
   }
  }
 };

 $("#social").easyAutocomplete(options);
});
 
</script>

Completed Code

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

<!-- select2 css -->
<link href='EasyAutocomplete/easy-autocomplete.min.css' rel='stylesheet' type='text/css'>

<!-- select2 script -->
<script src='EasyAutocomplete/jquery.easy-autocomplete.min.js'></script>

<style>
.eac-icon-right .eac-item img {
 top: auto;
}
</style>
<script>
$(document).ready(function(){
 var options = {
  data: [ {name: "Facebook", icon: "images/facebook.png"},
      {name: "Twitter", icon: "images/twitter.png"},
      {name: "Linkedin", icon: "images/linkedin.png"},
      {name: "Google Plus", icon: "images/google_plus.png"},
      {name: "Vimeo", icon: "images/vimeo.png"}],
  getValue: 'name',
  template: {
   type: "iconLeft",
   fields: {
    iconSrc: "icon"
   }
  }
 };

 $("#social").easyAutocomplete(options);
});

</script>

<input type='text' id='social'>

View Demo

3. Conclusion

These plugins give you more control over the element which you didn’t find in HTML <select>. You can learn more about select2 and Easyautocomplete from their Official website.

If you found this tutorial helpful then don't forget to share.

Contents

1. Select2

2. Easyautocomplete

3. Conclusion