Select2 jQuery plugin for replacement of default drop down box

Select menu replacement

While you are working with HTML form inputs there are ton of customise styles for input fields and radio buttons, but only less amount of styles available for select options. In this tutorial I will explain how to add most commonly use user friendly select option plugin for your web application forms. This plugin call “Select2”. It includes great features and customise options.

Select2 examples

To implement this plugin to your web application first you must download there js and css libraries. Download New Release
1. Copy Select2.min.css to your web application css directory
2. Copy Select2.min.js file to your web application js folder.

3. You need to add select2 css to before your main css link.

      <link href="css/select2.min.css" rel="stylesheet"/>

4. You need to add select2 js to after jquery.js library.

      <script src="js/select2.min.js" type="text/javascript"></script>

5. Once you add css and js to the document you can change select options by initializing element using javascript.

Example of html select option


<select name="contries" class="select2-menu" >
<option value="LK">Sri Lanka</option>
<option value="USA">United State of America</option>
     ...
</select>

You just need to initialize select option using class or element id. below is the example how to do it. select2 function will initialize the default select menu styles and features one you done it.

<script>
$(document).ready(function() {
    $(".select2-menu").select2();
});
</script>

for more details link