Show Image in Dropdown list with jQuery

Kailash Singh

Show Image in Dropdown list with jQuery

Published Jun 01,2019 by Kailash Singh

0 Comment     3265 Views    

In this tutorial, we are creating a show image in dropdown list with select2 plugins in JQuery.


Step 1 :- Add links in your code.


<script src=""></script>

<link href="" rel="stylesheet" />

<script src=""></script>  


Step 2 :-  Add HTML code on page.


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


Step 3 :-  Add JavaScript code on page.


             templateResult: formatOptions
    function formatOptions (state) 
       if (! { return state.text; }


       <!-- here i am creating a route of the images folder -->

       var $state = $(
            '<span ><img sytle="display: inline-block;" src="images/' + state.element.value.toLowerCase() + '.png"  /> ' + state.text + '</span>'

        return $state;


Step 4 :-  Create a images folder and you have to store images there.



Hope this will help our developers.

Because we believe Mantra means CodingMantra

Comments ( 0 )