Form Select2

Home
Form
Form Select2

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

Select2

View
Html
Js

Basic Select2

Use .select2 class for basic select2 control.

Single Select with Label

Use optgroup attribute for basic select2 with Label control.

Select With Icon

Use data attribute data-icon to add icon name for each options. And use class .select2-icons to set icon with option.

Template support

Select2 supports custom themes using the theme option so you can style Select2 to match the rest of your application. These are using the classic theme, which matches the old look of Select2.


// Basic Select2 
<div class="input-field">
  <select class="select2 browser-default">
    <option value="square">Square</option>
    <option value="rectangle">Rectangle</option>
    <option value="rombo">Rombo</option>
    <option value="romboid">Romboid</option>
    <option value="trapeze">Trapeze</option>
    <option value="traible">Triangle</option>
    <option value="polygon">Polygon</option>
  </select>
</div>
// Select2 With Icon
<div class="input-field">
  <select data-placeholder="Select a state..." class="select2-icons browser-default" id="select2-icons">
    <option value="Ac unit" data-icon="ac_unit" selected>Ac unit</option>
    <option value="widgets" data-icon="widgets">Widgets</option>
    <option value="weekend" data-icon="weekend">Weekend</option>
    <option value="web" data-icon="web">web</option>
    <option value="warning" data-icon="warning">Warning</option>
    <option value="apps" data-icon="apps">Apps</option>
    <option value="airplay" data-icon="airplay">Airplay</option>
    <option value="accessibility" data-icon="accessibility">Accessibility</option>
    <option value="accessible" data-icon="accessible">Accessible</option>
  </select>
</div>
//selects witn label
<div class="input-field">
  <select class="select2 browser-default">
    <optgroup label="Figures">
      <option value="romboid">Romboid</option>
      <option value="trapeze">Trapeze</option>
      <option value="triangle">Triangle</option>
      <option value="polygon">Polygon</option>
    </optgroup>
    <optgroup label="Colors">
      <option value="red">Red</option>
      <option value="green">Green</option>
      <option value="blue">Blue</option>
      <option value="purple">Purple</option>
    </optgroup>
  </select>
</div>


// Basic Select2 select
$(".select2").select2({
    dropdownAutoWidth: true,
    width: '100%'
});
// Select With Icon
$(".select2-icons").select2({
    dropdownAutoWidth: true,
    width: '100%',
    minimumResultsForSearch: Infinity,
    templateResult: iconFormat,
    templateSelection: iconFormat,
    escapeMarkup: function (es) { return es; }
});

// Format icon
function iconFormat(icon) {
    var originalOption = icon.element;
    if (!icon.id) { return icon.text; }
    var $icon = "<i class='material-icons'>" + $(icon.element).data('icon') + "</i>" + icon.text;
    return $icon;
}
// Theme support
$(".select2-theme").select2({
    dropdownAutoWidth: true,
    width: '100%',
    placeholder: "Classic Theme",
    theme: "classic"
});

Multiple Select with Label

Use optgroup attribute for multiple select box with Label control.

Maximum Select with Label

Select2 multi-value select boxes can set restrictions regarding the maximum number of options selected. The select below is declared with the multiple attribute with maximumSelectionLength in the select2 options.

Select With Icon

Use data attribute data-icon to add icon name for each options. And use class .select2-icons to set icon with option.

Multiple Select2

Use .select2 class for basic select2 control. Use multiple="multiple" attribute for multiple select box.


// Multiple Select with Label            
<div class="input-field">
  <select class="select2 browser-default" multiple="multiple">
    <optgroup label="Figures">
      <option value="romboid">Romboid</option>
      <option value="trapeze" selected>Trapeze</option>
      <option value="triangle">Triangle</option>
      <option value="polygon">Polygon</option>
    </optgroup>
    <optgroup label="Colors">
      <option value="red">Red</option>
      <option value="green">Green</option>
      <option value="blue" selected>Blue</option>
      <option value="purple">Purple</option>
    </optgroup>
  </select>
</div>
//Multiple select with label
<div class="input-field">
  <select class="max-length browser-default" multiple="multiple" id="max_length">
    <optgroup label="Figures">
      <option value="romboid">Romboid</option>
      <option value="trapeze" selected>Trapeze</option>
      <option value="triangle">Triangle</option>
      <option value="polygon">Polygon</option>
    </optgroup>
    <optgroup label="Colors">
      <option value="red">Red</option>
      <option value="green">Green</option>
      <option value="blue">Blue</option>
      <option value="purple">Purple</option>
    </optgroup>
  </select>
</div>
// Mutliple select with icon
<div class="input-field">
  <select data-placeholder="Select a state..." class="select2-icons browser-default"
    id="multiple-select2-icons" multiple="multiple">
    <option value="3d_rotation" data-icon="3d_rotation" selected>3d_rotation</option>
    <option value="access_alarm" data-icon="access_alarm">Access_alarm</option>
    <option value="account_circle" data-icon="account_circle">Account_circle</option>
    <option value="add_alarm" data-icon="add_alarm">Add_alarm</option>
    <option value="add_alert" data-icon="add_alert">Add_alert</option>
    <option value="airport_shuttle" data-icon="airport_shuttle">Airport_shuttle</option>
    <option value="announcement" data-icon="announcement">Announcement</option>
    <option value="archive" data-icon="archive">Archive</option>
    <option value="android" data-icon="android">Android</option>
    <option value="assessment" data-icon="assessment">Assessment</option>
    <option value="assignment" data-icon="assignment">Assignment</option>
    <option value="attach_file" data-icon="attach_file">Attach_file</option>
    <option value="attachment" data-icon="attachment">Attachment</option>
    <option value="audiotrack" data-icon="audiotrack">Audiotrack</option>
  </select>
</div>
//Multiple select2
<div class="input-field">
    <select class="select2 browser-default" multiple="multiple">
      <option value="square">Square</option>
      <option value="rectangle" selected>Rectangle</option>
      <option value="rombo">Rombo</option>
      <option value="romboid">Romboid</option>
      <option value="trapeze">Trapeze</option>
      <option value="traible" selected>Triangle</option>
      <option value="polygon">Polygon</option>
    </select>
  </div>


// Select With Icon 
$(".select2-icons").select2({
    dropdownAutoWidth: true,
    width: '100%',
    minimumResultsForSearch: Infinity,
    templateResult: iconFormat,
    templateSelection: iconFormat,
    escapeMarkup: function (es) { return es; }
});

// Format icon 
function iconFormat(icon) {
    var originalOption = icon.element;
    if (!icon.id) { return icon.text; }
    var $icon = "" + $(icon.element).data('icon') + "" + icon.text;

    return $icon;
}

    
// Limiting the number of selections
$(".max-length").select2({
    dropdownAutoWidth: true,
    width: '100%',
    maximumSelectionLength: 2,
    placeholder: "Select maximum 2 items"
});

Advance Options

View
Html
Js

Loading Remote Data

Select2 comes with AJAX support built in, using jQuery's AJAX methods. In this example, we can search for repositories using GitHub's API.

Customizing How Results Are Matched

Unlike other dropdowns on this page, this one matches options only if the term appears in the beginning of the string as opposed to anywhere: This custom matcher uses a compatibility module that is only bundled in the full version of Select2. You also have the option of using a more complex matcher.

Programmatic access

Select2 supports methods that allow programmatic control of the component.

Loading Array Data

Select2 provides a way to load the data from a local array. You can provide initial selections with array data by providing the option tag for the selected values, similar to how it would be done for a standard select.


// Loading Remote Data
<select class="select2-data-ajax browser-default" id="select2-ajax"></select>
// Customizing How Results Are Matched
<div class="input-field">
  <select class="select2-customize-result browser-default" multiple="multiple"
    id="select2-customize-result">
    <optgroup label="Figures">
      <option value="romboid">Romboid</option>
      <option value="trapeze">Trapeze</option>
      <option value="triangle">Triangle</option>
      <option value="polygon">Polygon</option>
    </optgroup>
    <optgroup label="Colors">
      <option value="red">Red</option>
      <option value="green">Green</option>
      <option value="blue">Blue</option>
      <option value="purple">Purple</option>
    </optgroup>
  </select>
</div>
// Programmatic access
<div class="input-field">
    <select class="select2 js-example-programmatic browser-default" id="programmatic-single">
      <optgroup label="Alaskan/Hawaiian Time Zone">
        <option value="AK">Alaska</option>
        <option value="HI">Hawaii</option>
      </optgroup>
      <optgroup label="Pacific Time Zone">
        <option value="CA">California</option>
        <option value="NV">Nevada</option>
        <option value="OR">Oregon</option>
        <option value="WA">Washington</option>
      </optgroup>
      <optgroup label="Eastern Time Zone">
        <option value="CT">Connecticut</option>
        <option value="DE">Delaware</option>
        <option value="FL">Florida</option>
        <option value="GA">Georgia</option>
        <option value="IN">Indiana</option>
        <option value="ME">Maine</option>
        <option value="MD">Maryland</option>
        <option value="MA">Massachusetts</option>
        <option value="MI">Michigan</option>
        <option value="NH">New Hampshire</option>
        <option value="NJ">New Jersey</option>
        <option value="NY">New York</option>
        <option value="NC">North Carolina</option>
        <option value="OH">Ohio</option>
        <option value="PA">Pennsylvania</option>
        <option value="RI">Rhode Island</option>
        <option value="SC">South Carolina</option>
        <option value="VT">Vermont</option>
        <option value="VA">Virginia</option>
        <option value="WV">West Virginia</option>
      </optgroup>
    </select>
  </div>
  <div class="btn-toolbar" role="toolbar" aria-label="Programmatic control">
    <div class="btn-group-sm" aria-label="Set Select2 option">
      <button class="js-programmatic-set-val btn">
        Set"California"
      </button>
    </div>
    <div class="btn-group-sm" role="group" aria-label="Open and close">
      <button class="js-programmatic-open btn">
        Open
      </button>
      <button class="js-programmatic-close btn">
        Close
      </button>
    </div>
    <div class="btn-group-sm" role="group" aria-label="Initialize and destroy">
      <button class="js-programmatic-init btn">
        Init
      </button>
      <button class="js-programmatic-destroy btn">
        Destroy
      </button>
    </div>
  </div>
  // Loading array data
  <div class="input-field">
      <select class="select2-data-array browser-default" id="select2-array"></select>
    </div>


  // Loading remote data
  $(".select2-data-ajax").select2({
      dropdownAutoWidth: true,
      width: '100%',
      ajax: {
          url: "https://api.github.com/search/repositories",
          dataType: 'json',
          delay: 250,
          data: function (params) {
              return {
                  q: params.term, // search term
                  page: params.page
              };
          },
          processResults: function (data, params) {
              // parse the results into the format expected by Select2
              // since we are using custom formatting functions we do not need to
              // alter the remote JSON data, except to indicate that infinite
              // scrolling can be used
              params.page = params.page || 1;

              return {
                  results: data.items,
                  pagination: {
                      more: (params.page * 30) < data.total_count
                  }
              };
          },
          cache: true
      },
      placeholder: 'Search for a repository',
      escapeMarkup: function (markup) { return markup; }, // let our custom formatter work
      minimumInputLength: 1,
      templateResult: formatRepo,
      templateSelection: formatRepoSelection
  });

function formatRepo(repo) {
    if (repo.loading) return repo.text;

    var markup = "<div class='select2-result-repository clearfix'>" +
        "<div class='select2-result-repository__avatar'><img src='" + repo.owner.avatar_url + "' /></div>" +
        "<div class='select2-result-repository__meta'>" +
        "<div class='select2-result-repository__title'>" + repo.full_name + "</div>";

    if (repo.description) {
        markup += "<div class='select2-result-repository__description'>" + repo.description + "</div>";
    }

    markup += "<div class='select2-result-repository__statistics'>" +
        "<div class='select2-result-repository__forks'><i class='icon-code-fork mr-0'></i> " + repo.forks_count + " Forks</div>" +
        "<div class='select2-result-repository__stargazers'><i class='icon-star5 mr-0'></i> " + repo.stargazers_count + " Stars</div>" +
        "<div class='select2-result-repository__watchers'><i class='icon-eye mr-0'></i> " + repo.watchers_count + " Watchers</div>" +
        "</div>" +
        "</div></div>";

    return markup;
}

function formatRepoSelection(repo) {
    return repo.full_name || repo.text;
}
// Customizing how result are matched
// Customizing how results are matched
function matchStart(term, text) {
    if (text.toUpperCase().indexOf(term.toUpperCase()) === 0) {
        return true;
    }

    return false;
}

$.fn.select2.amd.require(['select2/compat/matcher'], function (oldMatcher) {
    $(".select2-customize-result").select2({
        dropdownAutoWidth: true,
        width: '100%',
        placeholder: "Search by 'r'",
        matcher: oldMatcher(matchStart)
    });
});

// Programmatic access
var $select = $(".js-example-programmatic").select2({
    dropdownAutoWidth: true,
    width: '100%'
});
var $selectMulti = $(".js-example-programmatic-multi").select2();
$selectMulti.select2({
    dropdownAutoWidth: true,
    width: '100%',
    placeholder: "Programmatic Events"
});
$(".js-programmatic-set-val").on("click", function () { $select.val("CA").trigger("change"); });

$(".js-programmatic-open").on("click", function () { $select.select2("open"); });
$(".js-programmatic-close").on("click", function () { $select.select2("close"); });

$(".js-programmatic-init").on("click", function () { $select.select2(); });
$(".js-programmatic-destroy").on("click", function () { $select.select2("destroy"); });

$(".js-programmatic-multi-set-val").on("click", function () { $selectMulti.val(["CA", "AL"]).trigger("change"); });
$(".js-programmatic-multi-clear").on("click", function () { $selectMulti.val(null).trigger("change"); });

// Loading array data
var data = [
    { id: 0, text: 'enhancement' },
    { id: 1, text: 'bug' },
    { id: 2, text: 'duplicate' },
    { id: 3, text: 'invalid' },
    { id: 4, text: 'wontfix' }
];

$(".select2-data-array").select2({
    dropdownAutoWidth: true,
    width: '100%',
    data: data
});

Size

View
Html
Js

For different sizes of select2, Use classes like .select2-size-sm & .select2-size-lg for Large, small & Extra Small Select respectively.

Large

Default

Small


// Large            
<div class="input-field">
    <select class="select2-size-lg browser-default" id="large-select">
      <option value="square">Square</option>
      <option value="rectangle">Rectangle</option>
      <option value="rombo">Rombo</option>
      <option value="romboid">Romboid</option>
      <option value="trapeze">Trapeze</option>
      <option value="traible">Triangle</option>
      <option value="polygon">Polygon</option>
    </select>
  </div>
  // Small
  <div class="input-field">
      <select class="select2-size-sm browser-default" id="small-select">
        <option value="square">Square</option>
        <option value="rectangle">Rectangle</option>
        <option value="rombo">Rombo</option>
        <option value="romboid">Romboid</option>
        <option value="trapeze">Trapeze</option>
        <option value="traible">Triangle</option>
        <option value="polygon">Polygon</option>
      </select>
    </div>


// Large
$('.select2-size-lg').select2({
    dropdownAutoWidth: true,
    width: '100%',
    containerCssClass: 'select-lg'
});

// Small
$('.select2-size-sm').select2({
    dropdownAutoWidth: true,
    width: '100%',
    containerCssClass: 'select-sm'
});

Multi Select Size

View
Html
Js

For different sizes of select2, Use classes like .select2-size-sm & .select2-size-lg for Large, small & Extra Small Select respectively.

Large

Default

Small


//large
<div class="input-field">
    <select class="select2-size-lg browser-default" multiple="multiple" id="large-select-multi">
      <option value="square" selected>Square</option>
      <option value="rectangle">Rectangle</option>
      <option value="rombo">Rombo</option>
      <option value="romboid">Romboid</option>
      <option value="trapeze">Trapeze</option>
      <option value="traible">Triangle</option>
      <option value="polygon">Polygon</option>
    </select>
  </div>
  //small
<div class="input-field">
  <select class="select2-size-sm browser-default" multiple="multiple" id="small-select-multi">
    <option value="square">Square</option>
    <option value="rectangle">Rectangle</option>
    <option value="rombo" selected>Rombo</option>
    <option value="romboid">Romboid</option>
    <option value="trapeze">Trapeze</option>
    <option value="traible">Triangle</option>
    <option value="polygon">Polygon</option>
  </select>
</div>


// Large
$('.select2-size-lg').select2({
    dropdownAutoWidth: true,
    width: '100%',
    containerCssClass: 'select-lg'
});

// Small
$('.select2-size-sm').select2({
    dropdownAutoWidth: true,
    width: '100%',
    containerCssClass: 'select-sm'
});

Elizabeth Elliott
- hello!
- How can we help? We're here for you!
- I am looking for the best admin template.?
- Materialize admin is the responsive materializecss admin template.
- 8:20 a.m.
- Ohh! very nice
- Thank you.
- How can I purchase it?
- 9:00 a.m.
- From ThemeForest.
- Only $24
- Ohh! Thank you.
- I will purchase it for sure.
- Great, Feel free to get in touch on
- https://pixinvent.ticksy.com/
Type here..

FILES

MEMBERS

PAGES

Form Select2

Select2

Basic Select2

Single Select with Label

Select With Icon

Template support

Multiple Select2

Multiple Select with Label

Maximum Select with Label

Select With Icon

Multiple Select2

Advance Options

Loading Remote Data

Customizing How Results Are Matched

Programmatic access

Loading Array Data

Size

Large

Default

Small

Multi Select Size

Large

Default

Small

Elizabeth Elliott

Mary Adams

Caleb Richards

Caleb Richards

June Lane

Edward Fletcher

Crystal Bates

Nathan Watts

Willard Wood

Ronnie Ellis

Daniel Russell

Sarah Graves

Andrew Hoffman

Camila Lynch

Theme Customizer

Menu Options

Navbar Options

Footer Options