STYLE SWITCHER

Select2 – The jQuery replacement for select boxes

Select2 gives you a customizable select box with support for searching, tagging, remote data sets, infinite scrolling, and many other highly used options.

  • In your language
  • Remote data support
  • Theming
  • Fully extensible
  • Dynamic item creation
  • Full browser support

Installation

In order to use Select2, you must include the compiled JavaScript and CSS files on your website. There are multiple options for including these pre-compiled files, also known as a distribution, in your website or application.

Using Select2 from a CDN

A CDN (content delivery network) is the fastest way to get up and running with Select2!

Select2 is hosted on both the cdnjs and jsDelivr CDNs. Simply include the following lines of code in the <head> section of your page:

<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>

Single select boxes

Select2 was designed to be a replacement for the standard <select> box that is displayed by the browser. By default it supports all options and operations that are available in a standard select box, but with added flexibility.

<select class="js-example-basic-single" name="state"> 
    <option value="AL">Alabama</option> 
    ... 
    <option value="WY">Wyoming</option> 
</select>

Select2 will register itself as a jQuery function if you use any of the distribution builds, so you can call .select2() on any jQuery selector where you would like to initialize Select2.

// In your Javascript (external .js resource or <script> tag) 
$(document).ready(function() { 
    $('.js-example-basic-single').select2(); 
});

Website

Recent Article

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.