Documents

Title
Select2 #1. Basic Setting
Description
Select2 is a jquery plugin that makes select form more advanced.
Here is the basic usage of Select2.
Category
Form
Library
Select2
jQuery
Include Files
<!-- Add jQuery and Select2 -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>
<!-- If language change, add language file » https://cdnjs.com/libraries/select2 -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.5/js/i18n/ja.js"></script>
Basic markup

    <script>
        $(function () {
            $('.select2').select2({
                option
            });
        });
    </script>
    <select class="select2">
        <option></option>
        <optgroup label="...">
            <option value="..." selected>...</option>
            <option value="...">...</option>
            ...
        </optgroup>
        <optgroup label="...">
            <option value="...">...</option>
            ...
        </optgroup>
    </select>
    
Attachment Table

Select2 Options

PropertyTypeDefaultDescription
adaptContainerCssClass
adaptDropdownCssClass
ajaxObjectnullProvides support for ajax data sources.
allowClearBooleanfalseProvides support for clearable selections.
amdBaseString./See Using Select2 with AMD or CommonJS loaders.
amdLanguageBaseString./i18n/See Using Select2 with AMD or CommonJS loaders.
closeOnSelectBooleantrueControls whether the dropdown is closed after a selection is made.
containerCss
containerCssClassString'
dataArray of ObjectsnullAllows rendering dropdown options from an array.
dataAdapterSelectAdapterUsed to override the built-in DataAdapter.
debugBooleanfalseEnable debugging messages in the browser console.
dir
disabledBooleanfalseWhen set to true, the select control will be disabled.
dropdownAdapterDropdownAdapterUsed to override the built-in DropdownAdapter
dropdownAutoWidthBooleanfalse
dropdownCss
dropdownCssClassString'
dropdownParentjQuery selector or DOM node$(document.body)Allows you to customize placement of the dropdown.
escapeMarkupCallbackUtils.escapeMarkupHandles automatic escaping of content rendered by custom templates.
initSelectionCallbackSee initSelection. This option was deprecated in Select2 v4.0, and will be removed in v4.1.
languageString or ObjectEnglishTranslationSpecify the language used for Select2 messages.
matcherA Callback taking search params and the data Object.Handles custom search matching.
maximumInputLengthInteger0Maximum number of characters that may be provided for a search term.
maximumSelectionLengthInteger0The maximum number of items that may be selected in a multi-select control. If the value of this option is less than 1, the number of selected items will not be limited.
minimumInputLengthInteger0Minimum number of characters required to start a search.
minimumResultsForSearchInteger0The minimum number of results required to display the search box.
multipleBooleanfalseThis option enables multi-select (pillbox) mode. Select2 will automatically map the value of the multiple HTML attribute to this option during initialization.
placeholderString or ObjectnullSpecifies the placeholder for the control.
queryA function taking params (including a Callback)QueryThis option was deprecated in Select2 v4.0, and will be removed in v4.1.
resultsAdapterResultsAdapterUsed to override the built-in ResultsAdapter.
selectionAdapterSingleSelection or MultipleSelection, depending on the value of multiple.Used to override the built-in SelectionAdapter.
selectOnCloseBooleanfalseImplements automatic selection when the dropdown is closed.
sorterCallback
tagsBoolean / Array of ObjectsfalseUsed to enable free text responses.
templateResultCallbackCustomizes the way that search results are rendered.
templateSelectionCallbackCustomizes the way that selections are rendered.
themeStringdefaultAllows you to set the theme.
tokenizerCallbackA callback that handles automatic tokenization of free-text entry.
tokenSeparatorsArray[]The list of characters that should be used as token separators.
widthStringresolveSupports customization of the container width.
Related

Source Code

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- Add jQuery and Select2 -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css">
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>
    <!-- If language change, add language file » https://cdnjs.com/libraries/select2 -->
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.5/js/i18n/ja.js"></script>
    <title>Select2 #1. Basic Setting</title>
</head>
<body>
    <header>
        <h1 class="dlw-title">Select2 <small>#1. Basic Setting</small></h1>
        <p class="dlw-description">Select2 is a jquery plugin that makes select form more advanced.<br>
            Here is the basic usage of Select2.</p>
    </header>
    <section>
        <h2 class="dlw-subtitle">[1] Single select boxes </h2>
        <p>Search box is added to the select form and it can be filtered.</p>
        <script>
            $(function () {
                $('.select2-1').select2({
                    // Supports customization of the container width.
                    width: '200px',
                    // Specifies the placeholder for the control.
                    placeholder: 'Please Select',
                    // Provides support for clearable selections.
                    allowClear: true
                });
            });
        </script>
        <select class="select2-1">
            <option></option>
            <!-- "optgroup" tag creates group -->
            <optgroup label="Fruit">
                <option value="apple">Apple</option>
                <option value="banana">Banana</option>
                <option value="cherry">Cherry</option>
                <!-- Add "selected" for initial selection -->
                <option value="grape" selected>Grape</option>
                <option value="lemon">Lemon</option>
            </optgroup>
            <optgroup label="Vegetable">
                <option value="beans">Beans</option>
                <option value="carrots">Carrots</option>
                <option value="lettuce">Lettuce</option>
                <option value="radish">Radish</option>
                <option value="tomato">Tomato</option>
            </optgroup>
        </select>
    </section>
    <section>
        <h2 class="dlw-subtitle">[2] Multi-select boxes (pillbox) </h2>
        <p>It is possible to select multiple values like a tag.</p>
        <script>
            $(function () {
                $('.select2-2').select2({
                    width: '200px',
                    placeholder: 'Please Select',
                    allowClear: true,
                    // This option enables multi-select (pillbox) mode.
                    multiple: true
                });
            });
        </script>
        <select class="select2-2">
            <option></option>
            <optgroup label="Fruit">
                <option value="apple">Apple</option>
                <option value="banana">Banana</option>
                <option value="cherry">Cherry</option>
                <option value="grape" selected>Grape</option>
                <option value="lemon">Lemon</option>
            </optgroup>
            <optgroup label="Vegetable">
                <option value="beans">Beans</option>
                <option value="carrots">Carrots</option>
                <option value="lettuce">Lettuce</option>
                <option value="radish">Radish</option>
                <option value="tomato">Tomato</option>
            </optgroup>
        </select>
    </section>
    <section>
        <h2 class="dlw-subtitle">[3] Min/Max Search Term Length </h2>
        <p>Restrict min/max search term length to enter in search box.</p>
        <script>
            $(function () {
                $('.select2-3').select2({
                    width: '200px',
                    placeholder: 'Please Select',
                    allowClear: true,
                    // Minimum number of characters required to start a search.
                    minimumInputLength: 2,
                    // Maximum number of characters that may be provided for a search term.
                    maximumInputLength: 5
                });
            });
        </script>
        <select class="select2-3">
            <option></option>
            <optgroup label="Fruit">
                <option value="apple">Apple</option>
                <option value="banana">Banana</option>
                <option value="cherry">Cherry</option>
                <option value="grape">Grape</option>
                <option value="lemon">Lemon</option>
            </optgroup>
            <optgroup label="Vegetable">
                <option value="beans">Beans</option>
                <option value="carrots">Carrots</option>
                <option value="lettuce">Lettuce</option>
                <option value="radish">Radish</option>
                <option value="tomato">Tomato</option>
            </optgroup>
        </select>
    </section>
    <section>
        <h2 class="dlw-subtitle">[4] Hiding the Search Box </h2>
        <p>If the search box is unnecessary, hide it.</p>
        <script>
            $(function () {
                $('.select2-4').select2({
                    width: '200px',
                    placeholder: 'Please Select',
                    // The minimum number of results required to display the search box.
                    minimumResultsForSearch: Infinity
                });
            });
        </script>
        <select class="select2-4">
            <option></option>
            <optgroup label="Fruit">
                <option value="apple">Apple</option>
                <option value="banana">Banana</option>
                <option value="cherry">Cherry</option>
                <option value="grape">Grape</option>
                <option value="lemon">Lemon</option>
            </optgroup>
            <optgroup label="Vegetable">
                <option value="beans">Beans</option>
                <option value="carrots">Carrots</option>
                <option value="lettuce">Lettuce</option>
                <option value="radish">Radish</option>
                <option value="tomato">Tomato</option>
            </optgroup>
        </select>
    </section>
    <section>
        <h2 class="dlw-subtitle">[5] Hiding the Search Box Multi-select </h2>
        <p>If the search box is unnecessary with multi-select, hide it.</p>
        <script>
            $(function () {
                $('.select2-5').select2({
                    width: '200px',
                    placeholder: 'Please Select',
                    multiple: true
                }).on('select2:opening select2:closing', function () {
                    // Hide the search box when opening/closing select2 function.
                    var $searchfield = $(this).parent().find('.select2-search__field');
                    $searchfield.prop('disabled', true);
                });
            });
        </script>
        <select class="select2-5">
            <option></option>
            <optgroup label="Fruit">
                <option value="apple">Apple</option>
                <option value="banana">Banana</option>
                <option value="cherry">Cherry</option>
                <option value="grape">Grape</option>
                <option value="lemon">Lemon</option>
            </optgroup>
            <optgroup label="Vegetable">
                <option value="beans">Beans</option>
                <option value="carrots">Carrots</option>
                <option value="lettuce">Lettuce</option>
                <option value="radish">Radish</option>
                <option value="tomato">Tomato</option>
            </optgroup>
        </select>
    </section>
    <section>
        <h2 class="dlw-subtitle">[6] Message Language (ex. Japanese) </h2>
        <p>Change the language setting.</p>
        <script>
            $(function () {
                $('.select2-6').select2({
                    width: '200px',
                    allowClear: true,
                    minimumInputLength: 2,
                    // Specify the language used for Select2 messages.
                    language: 'ja'
                });
            });
        </script>
        <select class="select2-6">
            <option></option>
            <optgroup label="Fruit">
                <option value="apple">Apple</option>
                <option value="banana">Banana</option>
                <option value="cherry">Cherry</option>
                <option value="grape">Grape</option>
                <option value="lemon">Lemon</option>
            </optgroup>
            <optgroup label="Vegetable">
                <option value="beans">Beans</option>
                <option value="carrots">Carrots</option>
                <option value="lettuce">Lettuce</option>
                <option value="radish">Radish</option>
                <option value="tomato">Tomato</option>
            </optgroup>
        </select>
    </section>
    <section>
        <h2 class="dlw-subtitle">[7] Custom Message </h2>
        <p>Customize message to original.</p>
        <script>
            $(function () {
                $('.select2-7').select2({
                    width: '200px',
                    allowClear: true,
                    minimumInputLength: 2,
                    // Customize for each message. » https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.5/js/i18n/en.js
                    language: {
                        inputTooShort: function () {
                            // default: 'Please enter n or more characters'
                            return 'You need to enter more characters to search.';
                        },
                        noResults: function () {
                            // default: 'No results found'
                            return 'Sorry. There is nothing you want here.'
                        }
                    }
                });
            });
        </script>
        <select class="select2-7">
            <option></option>
            <optgroup label="Fruit">
                <option value="apple">Apple</option>
                <option value="banana">Banana</option>
                <option value="cherry">Cherry</option>
                <option value="grape">Grape</option>
                <option value="lemon">Lemon</option>
            </optgroup>
            <optgroup label="Vegetable">
                <option value="beans">Beans</option>
                <option value="carrots">Carrots</option>
                <option value="lettuce">Lettuce</option>
                <option value="radish">Radish</option>
                <option value="tomato">Tomato</option>
            </optgroup>
        </select>
    </section>
    <section>
        <h2 class="dlw-subtitle">[8] Dynamic Option Creation </h2>
        <p>Add the value entered in the search box as a new option.</p>
        <script>
            $(function () {
                $('.select2-8').select2({
                    width: '200px',
                    placeholder: 'Please Select',
                    allowClear: true,
                    // Used to enable free text responses.
                    tags: true
                });
            });
        </script>
        <select class="select2-8">
            <option></option>
            <optgroup label="Fruit">
                <option value="apple">Apple</option>
                <option value="banana">Banana</option>
                <option value="cherry">Cherry</option>
                <option value="grape">Grape</option>
                <option value="lemon">Lemon</option>
            </optgroup>
            <optgroup label="Vegetable">
                <option value="beans">Beans</option>
                <option value="carrots">Carrots</option>
                <option value="lettuce">Lettuce</option>
                <option value="radish">Radish</option>
                <option value="tomato">Tomato</option>
            </optgroup>
        </select>
    </section>
    <section>
        <h2 class="dlw-subtitle">[9] Get Value </h2>
        <p>Sample to get the value of the option selected with Select2.</p>
        <script>
            $(function () {
                $('.select2-9').select2({
                    width: '200px',
                    placeholder: 'Please Select',
                    allowClear: true
                }).on('select2:select', function () {
                    $('.select_value').val($(this).val());
                });
            });
        </script>
        <select class="select2-9">
            <option></option>
            <optgroup label="Fruit">
                <option value="apple">Apple</option>
                <option value="banana">Banana</option>
                <option value="cherry">Cherry</option>
                <option value="grape">Grape</option>
                <option value="lemon">Lemon</option>
            </optgroup>
            <optgroup label="Vegetable">
                <option value="beans">Beans</option>
                <option value="carrots">Carrots</option>
                <option value="lettuce">Lettuce</option>
                <option value="radish">Radish</option>
                <option value="tomato">Tomato</option>
            </optgroup>
        </select>        
        <br>
        <br>
        <label>Selected value</label>
        <input class="select_value" type="text" />
    </section>
    <section>
        <h2 class="dlw-subtitle">[10] Change Text With Value (ex. Add Icon Image) </h2>
        <p>Change the text according to the value of the option.</p>
        <script>
            $(function () {
                $('.select2-10').select2({
                    width: '200px',
                    placeholder: 'Please Select',
                    allowClear: true,
                    // Customizes the way that search results are rendered.
                    templateResult: formatState
                });
                function formatState(state) {
                    if (!state.id) {
                        return state.text;
                    }
                    var baseUrl = "/path/images/select2/icon/";
                    var $state = $(
                        '<span><img src="' + baseUrl + state.element.value + '.png" /> ' + state.text +
                        '</span>'
                    );
                    return $state;
                };
            });
        </script>
        <select class="select2-10">
            <option></option>
            <optgroup label="Fruit">
                <option value="apple">Apple</option>
                <option value="banana">Banana</option>
                <option value="cherry">Cherry</option>
                <option value="grape">Grape</option>
                <option value="lemon">Lemon</option>
            </optgroup>
            <optgroup label="Vegetable">
                <option value="beans">Beans</option>
                <option value="carrots">Carrots</option>
                <option value="lettuce">Lettuce</option>
                <option value="radish">Radish</option>
                <option value="tomato">Tomato</option>
            </optgroup>
        </select>
    </section>
</body>
</html>

Comment

Search

Style Design
Text Style DesignCSS

Here, design samples of various effects to text are posted.

Headline (Heading) Style DesignCSS

The headline is the text indicating the nature of the article below it.
Here, design samples of headline using style sheets are posted.

OL (Ordered List) Style DesignCSS

The HTML <ol> element represents an ordered list of items.
Here, design samples of ol using style sheets are posted.

HR (Separator Line) Style DesignCSS

The HTML <hr> element represents a thematic break between paragraph-level elements.
Here, design samples of hr using style sheets are posted.

Box Shadow Style DesignCSS

The box-shadow CSS property is used to add shadow effects around an element's frame.
Here, design samples of box-shadow property using style sheets are posted.

Layout
How to specify a breakpoint and switch imagesJS

Using <picture> and srcset, it is a method of switching images according to screen size. It also corresponds to retina.
In this example, Picturefill is added for IE.

Grid LayoutCSS

Grid is the value of the CSS display property.
Here, layout samples of grid property are posted.

FlexCSS

Flex is the value of the CSS display property.

Link & Button
Bootstrap ButtonCSS

It is a standard button design of Bootstrap Framework.

Hover.cssCSS

Hover.css is a style-sheet collection of hover effects.

Button.cssCSS

Button.css is collection of CSS3 button animations.

Card
Bootstrap CardCSS

It is a standard Card design of Bootstrap Framework.

Text
Arctext.jsjQuery

Arctext.js is a jQuery plugin that causes a string to curve along a specified circle radius.

Lettering.jsjQuery

Lettering.js is a jQuery plugin that encloses a specified character string with one character, one word, one column by <span> tag.

Textillate.jsjQuery

Textillate.js is a jQuery plugin that adds In / Out animation effects to text.

FitText.jsjQuery

FitText.js is jQuery plugin that fits the font size according to the width of the parent element.

Media
FeedEkjQuery

FeedEk is a jQuery plugin that parses RSS and Atom feeds and displays them.

YouTube Embed

Introduction of various embedment methods of YouTube.

FitVids.jsjQuery

FitVids is a jQuery plug-in that converts YouTube videos embedded with iframe into responsive.

xZoomjQuery

xZoom is a jQuery plug-in that shows a zoom preview of the image.
It is possible to customize the preview position and zoom.

Instagram.cssCSS

Instagram.css is a stylesheet set that filters photos like instagram.

Date
Moment.jsJS

Moment.js is a javascript that processes and displays date and time.

Bootstrap Material DatePickerjQuery

Bootstrap Material DatePicker is jQuery data picker plugin using Moment.js.

Table
MultifilterjQuery

Multifilter is jQuery Table Filtering Plugin.

Flex TableCSS

Responsive table using "display: flex;".
Not supported for rowspan.

Grid TableCSS

Responsive table using "display: grid;".
Not supported for rowspan.

Bootstrap TableCSS

It is a standard Table design of Bootstrap Framework.

Form
jQuery Mask PluginjQuery

jQuery Mask Plugin is jQuery plugin that make mask (validation) on form field.

Select2 #1. Basic SettingjQuery

Select2 is a jquery plugin that makes select form more advanced.
Here is the basic usage of Select2.

jQuery SearcherjQuery

jQuery Searcher is jQuery search/filtering plugin that supports various markups.

Slider
Bootstrap CarouseljQuery

It is a standard Carousel of Bootstrap Framework.

FlexSlider #1. Single SliderjQuery

FlexSlider is responsive jQuery slider plugin.
Here, basic single slider setting of Flexslider are posted.

FlexSlider #2. Carousel SliderjQuery

FlexSlider is responsive jQuery slider plugin.
Here, basic carousel slider setting of Flexslider are posted.

slick #1. Single SliderjQuery

slick is responsive jQuery slider plugin.
Here, basic single slider setting of slick are posted.

slick #2. Carousel SliderjQuery

slick is responsive jQuery slider plugin.
Here, carousel slider setting of slick are posted.

Lightbox
fancyBox #1. basic image lightboxjQuery

fancyBox is jQuery lightbox plugin.
Here, basic image lightbox setting of fancyBox are posted.

fancyBox #2. media lightboxjQuery

fancyBox is jQuery lightbox plugin.
Here, YouTube, Vimeo, Instagram, Google Maps, inline HTML, iframe lightbox setting of fancyBox are posted.

Magnific Popup #1. basic image lightboxjQuery

Magnific Popup is jQuery lightbox plugin.
Here, basic image lightbox setting of Magnific Popup are posted.

Magnific Popup #2. media lightboxjQuery

Magnific Popup is jQuery lightbox plugin.
Here, YouTube, Vimeo, Google Maps, inline HTML lightbox setting of Magnific Popup are posted.

Magnific Popup #3. CSS3-based animation effectsjQuery

Since Magnific Popup does not incorporate animation effects by standard, you need to set it yourself.
Here we summarize the CSS3-based animation settings.

Navigation
animsitionjQuery

animsition is a jQuery plugin that adds an in/out animation effect at the time of page transition.

GreedyNavjQuery

GreedyNav is a responsive navigation menu using jQuery which switches over the items that protruded when the screen was scaled down to dropdown.

GridTabjQuery

GridTab is a lightweight jQuery plugin to create grid based responsive tabs.

jQuery.NiceScrolljQuery

jQuery.NiceScroll is a jQuery plugin that extends scroll display and functions.

metisMenujQuery

metisMenu is a jQuery plugin that expands vertical and vertical menus.

fullPage.js #1. basic fullscreen scrollingjQuery

fullPage.js is jQuery Fullscreen Scrolling plugin.
Here, basic fullscreen scrolling of fullPage.js are posted.

fullPage.js #2. fullscreen scrolling with menujQuery

fullPage.js is jQuery Fullscreen Scrolling plugin.
Here, navigation menu is displayed..

Offside.js #1. Basic Off-canvasJS

Offside.js is a JavaScript kit that expands off-canvas.
This is a sample where the left side off-canvas expands.

Offside.js #2. Multiple Off-canvasJS

Offside.js is a JavaScript kit that expands off-canvas.
This is a sample that expands multiple off-canvases.

Filterizr #1. Basic FilteringjQuery

Filterizr is a jQuery plugin that sorts, shuffles, searches for the items in the container.
This is a basic sample without setting options.

Filterizr #2. Advanced FilteringjQuery

Filterizr is a jQuery plugin that sorts, shuffles, searches for the items in the container.
This is a sample of more advanced setting of Filterizr.

Animation
animsitionjQuery

animsition is a jQuery plugin that adds an in/out animation effect at the time of page transition.

Textillate.jsjQuery

Textillate.js is a jQuery plugin that adds In / Out animation effects to text.

ScrollajQuery

Scrolla is jQuery scroll animation plugin.

Hover.cssCSS

Hover.css is a style-sheet collection of hover effects.

Animate.cssCSS

Animate.css is a style-sheet collection of animation effects.

jQuery Easing PluginjQuery

jQuery Easing Plugin is a plugin to extend the easing (animation effect) of jQuery.
The easing of element is posted.

Background
fullPage.js #1. basic fullscreen scrollingjQuery

fullPage.js is jQuery Fullscreen Scrolling plugin.
Here, basic fullscreen scrolling of fullPage.js are posted.

fullPage.js #2. fullscreen scrolling with menujQuery

fullPage.js is jQuery Fullscreen Scrolling plugin.
Here, navigation menu is displayed..

jquery.mb.YTPlayerjQuery

jQuery.mb.YTPlayer is jQuery Background player plugin.

Modal / Tooltip
Hint.cssCSS

Hint.css is a style sheet set for tooltip.
You can display tooltip just by adding class name.

ProtipjQuery

Protip is a jQuery plugin that generates tooltips.
Set the position, size, etc. of the tooltip only with data attribute.

Social
Framework
Bootstrap CarouseljQuery

It is a standard Carousel of Bootstrap Framework.

Bootstrap CardCSS

It is a standard Card design of Bootstrap Framework.

Bootstrap ButtonCSS

It is a standard button design of Bootstrap Framework.

Bootstrap TableCSS

It is a standard Table design of Bootstrap Framework.

Cheat Sheet
HTML5 Cheat Sheet

HTML5 Cheat Sheet by Make A Website Hub

CSS3 Cheat Sheet

CSS3 Cheat Sheet by Smashing Magazine

Visual Studio Code Keyboard Shortcuts

This is the Visual Studio Code default keyboard shortcut list.

GreenSock Cheat Sheet

Cheese sheet of TweenMAX, TweenLite, TimelineLite, TimelineMax by GreenSock.

Other
Google Search

On this page you can search for codes collectively.

Design News

It is a news feed about design.