JQuery – How To Add Icon in the Dropdown List Box

This tutorial explains how to set icon in the drop down list box in jQuery. The following example shows setting icon for particular values in the drop down menu list. In this example, we are using two groups within select element. We could see that, we have set data (‘active’) to 0; it means that options which are defined with data-active=0, only those options will display with dot circle icon with green color.

The select2 is a jQuery based replacement for select boxes. It gives some extra functionality and makes select boxes more users friendly. If you want to use this functionality, then you have to import the plugin in your web page. It provides support for searching, remote data sets and infinite scrolling of results. Let’s see the example how to set the icon in the dropdown list.

JQuery Select2 Plugin Example

<html>
<head>
<title>JQuery-Setting Icon in the Dropdown List Box</title>
<script	src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
<script	src="http://ivaynberg.github.io/select2/select2-3.4.5/select2.js" type="text/javascript"></script>
<link href="http://ivaynberg.github.io/select2/select2-3.4.5/select2.css" rel="stylesheet">
<link href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
<style>
   body {
      padding: 10px;
   }
   .fa-dot-circle-o {
      float: right;
      line-height: 20px;
      color:green;
   }
</style>
</head>
<body>
<select id="myval" style>
    <optgroup label="My First Group">
        <option value="0" data-active="0">Hello!!!</option>
        <option value="1" data-active="1">Dot Circle 1</option>
        <option value="2" data-active="0">Dot Circle 2</option>
    </optgroup>
    <optgroup label="My Second Group">
        <option value="2" data-active="0">Dot Circle 3</option>
        <option value="3" data-active="1">Dot Circle 4</option>
        <option value="3" data-active="0">Dot Circle 5</option>
    </optgroup>
</select>
 <script>
$("#myval").select2({
    width: "50%",
    formatResult: function (state) {
        if (!state.id) return state.text;
        if ($(state.element).data('active') == "0") {
            return state.text + "<i class='fa fa-dot-circle-o'></i>";
        } else {
            return state.text;
        }
    },
    formatSelection: function (state) {
        if ($(state.element).data('active') == "0") {
            return state.text + "<i class='fa fa-dot-circle-o'></i>";
        } else {
            return state.text;
        }
    }
});
</script>
</body>
</html>
  • As shown in the above script, we have included external resources select2.js, select2.css and font-awesome.css to run the program correctly. The .select2 is a jQuery based replacement for select boxes which provides support for searching, scrolling of result etc and font-awesome gives scalable vector icons that can be customized instantly such as size, color or anything can be done with use of CSS.
  • We are using two groups within select element. We could see that, we have set data (‘active’) to 0; it means that options which are defined with data-active=0, only those options will display with dot circle icon with green color.
  • In script we are using select2 jQuery plugin which uses id of the select element to display dropdown list box. It also uses formatResult method which formats the item for display in the input box once it is selected. Each line is row of data which passes to formatResult method and formatSelection method is used to change the look of the selected element in the document.
  • Moving forward, formatResult function contains parameter called state which checks for data active=0. The elements which matches with data active=0, returns with green color dot circle in the dropdown list box and as mentioned in the above statement, the formatSelection used to change look of the matched element in the document.

JQuery Select2 Plugin Demo

When you run the above example, you would get the following output:

JQuery- Setting Icon in the Dropdown List Box

Comments

comments

About Krishna Srinivasan

He is Founder and Chief Editor of JavaBeat. He has more than 8+ years of experience on developing Web applications. He writes about Spring, DOJO, JSF, Hibernate and many other emerging technologies in this blog.

Speak Your Mind

*