Select2

TIP

Select dropdowns with search, multiple select, option groups, disabled options, and more. Default Select Boxes are replaced by the Select2 Library – Version4.1.0-rc.0.

• Use the class js-select2 if you want to use Select2, or just c-select for the styling. See Select.
• If you want to allow custom options tags, add data-custom-options

Content:

• Default Version
• Variants
  • With Search Field in Dropdown
  • Multiple Select
  • Option Groups
  • Light Version
  • Disabled Select
  • Disabled Results
  • Hidden Disabled Results
  • Link Styling with Icons
• Combinations
  • Select-Field with Icon
  • Select with Info-Tooltip
  • Select With Inline-Btn
• Fake Select2
• AJAX Example (with Search and Clear-Button)
• Word Wrapping Demos
• Settings and API

Default Version

.c-float-container.-has-select > select.js-select2

WARNING

The search is hidden per default, add the attribute data-search to enable it.

Select Box with Floating LabelFirst itemBlablaSecond itemThird itemLorem Ipsumlorem ipsum dolor sit amet consectetur adipisici elitlorem ipsum dolor sit amet consectetur adipisici elitJust an itemLast item

Show Code

<div class="c-float-container -has-select -is-active">
  <label class="c-label" for="opts">Select Box with Floating Label</label>
  <select class="c-select js-select2">
    <!-- Comment -->
    <option value='1'>First item</option>
    <option value='9'>Blabla</option>
    <option value='2'>Second item</option>
    <option value='3'>Third item</option>
    <option value='4'>Lorem Ipsum</option>
    <option value='5'>lorem ipsum dolor sit amet consectetur adipisici elit</option>
    <option value='6'>lorem ipsum dolor sit amet consectetur adipisici elit</option>
    <option value='7'>Just an item</option>
    <option value='8'>Last item</option>
  </select>
</div>

Variants

With Search Field in Dropdown

.js-select2[data-search]

Select Box with Search FieldFirst itemSecond itemThird itemLorem Ipsum

Show Code

<div class="c-float-container -has-select -is-active m-b-m">
  <label class="c-label" for="opts">Select Box with Search Field</label>
  <select class="c-select js-select2" data-search>
      <option value='1'>First item</option>
      <option value='2'>Second item</option>
      <option value='3'>Third item</option>
      <option value='4'>Lorem Ipsum</option>
  </select>
</div>

Multiple Select

<select multiple ..

Multiple SelectFirst itemSecond itemThird itemLorem Ipsum

Show Code

<div class="c-float-container -has-select -is-active m-b-m">
  <label class="c-label" for="opts">Multiple Select</label>
  <!-- multiple data-additional-classes="" -->
  <select class="c-select js-select2" multiple>
    <option selected value='1'>First item</option>
    <option value='2'>Second item</option>
    <option value='3'>Third item</option>
    <option value='4'>Lorem Ipsum</option>
  </select>
</div>

Option Groups

optgroup > option ..

With Option GroupsNested option 1Nested option 2Nested option 1Nested option 2

Show Code

<div class="c-float-container -has-select m-b-m">
    <label class="c-label" for="opts">With Option Groups</label>
    <select class="c-select js-select2" data-search>
        <optgroup label="Group Name">
            <option>Nested option 1</option>
            <option>Nested option 2</option>
        </optgroup>
        <optgroup label="Group Name 2">
            <option>Nested option 1</option>
            <option>Nested option 2</option>
        </optgroup>
    </select>
</div>

Light Version

.c-float-container.-has-select.-light > select[data-additional-classes="-light"]

Light Select DropdownFirst itemSecond itemThird item

Show Code

<div class="c-float-container -has-select -light">
    <label class="c-label" for="opts">Light Select Dropdown</label>
    <select class="js-select2" name="opts" data-additional-classes="-light">
        <option value="0"></option>
        <option value='1'>First item</option>
        <option value='2'>Second item</option>
        <option value='3'>Third item</option>
    </select>
</div>

Disabled Select

.c-select.-is-disabled > select[disabled]

Disabled Select BoxFirst itemSecond itemThird itemLorem Ipsumlorem ipsum dolor sit amet consectetur adipisici elitlorem ipsum dolor sit amet consectetur adipisici elitJust an itemLast item

Show Code

<div class="c-float-container -has-select -is-disabled">
    <label class="c-label" for="opts">Disabled Select Box</label>
    <select class="js-select2" disabled name="opts">
        <option value='1'>First item</option>
        <option value='2'>Second item</option>
        <option value='3'>Third item</option>
        <option value='4'>Lorem Ipsum</option>
        <option value='5'>lorem ipsum dolor sit amet consectetur adipisici elit</option>
        <option value='6'>lorem ipsum dolor sit amet consectetur adipisici elit</option>
        <option value='7'>Just an item</option>
        <option value='8'>Last item</option>
    </select>
</div>

Disabled Results

<option value='...' disabled>

Select Box with Disabled OptionsFirst itemSecond itemThird itemLast item

Show Code

<div class="c-float-container -has-select">
    <label class="c-label" for="disabled-options">Select Box with Disabled Options</label>
    <select class="js-select2" id="disabled-options">
        <option value='1'>First item</option>
        <option value='2' disabled>Second item</option>
        <option value='3'>Third item</option>
        <option value='4' disabled>Last item</option>
    </select>
</div>

Hidden Disabled Results

select.js-select2[data-hide-disabled]

Select Box with Hidden Disabled OptionsFirst itemSecond itemThird itemLast item

Show Code

<div class="c-float-container -has-select">
    <label class="c-label" for="hide-disabled-options">Select Box with Hidden Disabled Options</label>
    <select class="js-select2" id="hide-disabled-options" data-hide-disabled>
        <option value='1'>First item</option>
        <option value='2' disabled>Second item</option>
        <option value='3'>Third item</option>
        <option value='4' disabled>Last item</option>
    </select>
</div>

Link Styling with Icons

.js-select2 > select[data-additional-classes="-is-link -has-icons -small"]

✓✕

✓✕

Show Code

<div class="h-flex h-space-around">
    <div class="h-width-40">
    <select class="js-select2 demo-link-example" name="link-select" data-additional-classes="-is-link -has-icons">
        <option value="1" class="js-option-lager">✓</option>
        <option value="0" class="js-option-no-lager">✕</option>
    </select>
    </div>
    <div class="h-width-40">
    <select class="js-select2 demo-link-example" name="link-select-small" id="link-select-small" data-additional-classes="-is-link -has-icons -small">
        <option value="1" class="js-option-lager">✓</option>
        <option value="0" class="js-option-no-lager">✕</option>
    </select>
    </div>
</div>

Combinations

Select-Field with Icon

.c-float-container.-select.-has-icon > .c-float-container__icon + select[data-additional-classes="-icon"]

Floating LabelFirst itemSecond itemThird itemLast item

Show Code

<div class="c-float-container -has-select -has-icon">
    <div class="c-float-container__icon">
        <span class="fa fa-sliders-h" aria-hidden="true"></span>
    </div>
    <label class="c-label" for="select-icon">Floating Label</label>
    <select class="js-select2" name="select-icon" data-additional-classes="-icon">
        <option value='1'>First item</option>
        <option value='2'>Second item</option>
        <option value='3'>Third item</option>
        <option value='4'>Last item</option>
    </select>
</div>

Select with Info-Tooltip

.c-float-container.-has-select.-has-icon.-icon-right > select.js-select2[ select[data-additional-classes="-icon"]

Floating LabelFirst itemSecond itemThird itemLast item

Ausgewähltes Prüfzertifikat löschen

Show Code

<div class="c-float-container -has-select -has-icon -icon-right">
        <label class="c-label" for="select-info">Floating Label</label>
        <select class="js-select2" name="select-info" data-additional-classes="-icon">
            <option value='1'>First item</option>
            <option value='2'>Second item</option>
            <option value='3'>Third item</option>
            <option value='4'>Last item</option>
        </select>
        <div class="c-float-container__icon -right js-tooltip" title="Prüfzertifikat löschen"
            data-placement="left">
            <span class="fa fa-info-circle" aria-hidden="true"></span>
        </div>
    </div>

Select With Inline-Btn

See Select with Inline Button.

Fake Select2

WARNING

This is a fake select field without any functionality, using the class .c-fake-select. Sometimes we just need to display selected values in a styled way, without the need for a real select or select2.

Bestandteil *

TRICLOSAN API (PZN: 00703078, Caesar & Loretz GmbH, 10 g)

Show Code

<div class="c-float-container -is-active -has-select h-hover-pointer -has-icon" required="required">
    <label class="c-label">Bestandteil <span class="">*</span></label>
    <div class="print-hide c-float-container__icon -left">
        <span class="fa far fa-search" aria-hidden="true"></span>
    </div>
    <div class="c-fake-select h-width-100 p-r-xxl p-l-xxl h-border-bottom-gray-bold">
        <div class="c-fake-select__content -m-l-xxs">
            TRICLOSAN API <span class="h-color-gray m-l-xxxs"> (PZN: 00703078, Caesar &amp; Loretz GmbH, 10 g) </span>
        </div>
        <span class="c-fake-select__arrow"></span>
    </div>
</div>

AJAX Example (with Search and Clear-Button)

TIP

• allowClear needs a placeholder and placeholder need a corresponding option value (which cannot be an empty string, but can be a single space)

• Select2 AJAX support: See select2.org/data-sources/ajax

Show Code

import {Select} from "./Select";
Select.init();

const $select = $(".js-example");
const mergedSelectOptions = $.extend(true, {}, Select.getOptionsWithTags("Unbekannter Bestandteil"), {
    ajax: {
        url: "https://jsonplaceholder.typicode.com/posts/", // aktuell Dummy-API, gerne auch andere Endpunkte ausprobieren!
        dataType: "json",
        allowClear: true, // always use in combination with data-placeholder attribute on element
        processResults: function (data) {
            /**
             * Wir setzen "text" (also den Text in der Zeile) hier auf den Namen des Elements.
             * Siehe https://select2.org/data-sources/formats
             * Da die Elemente von der Dummy-API ohnehin schon ein Attribut "id" haben, müssen wir das nicht extra setzen.
             */
            data.forEach(resultObj => {
                        resultObj.info = resultObj.body;
                        resultObj.text = resultObj.title;
                        Select.addOptionTagsIfNotExists($select, resultObj);
                    }
            );
            return {
                results: data
            };
        }
    }
});

$select.each(function () {
    Select.apply($(this), mergedSelectOptions);
});

Select Box with Dummy-API

---

Word Wrapping Demos

WARNING

WIP not correct yet

overflow: hidden; white-space: nowrap; text-overflow: ellipsis;

Text is being cut off Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. lorem ipsum dolor sit amet consectetur adipisici elit

height: autoOld Select Dropdownloremipsumdolorsitametconsecteturadipisicielitlorem ipsum dolor sit amet consectetur adipisici elit

height: autoloremipsumdolorsitametconsecteturadipisicielitlorem ipsum dolor sit amet consectetur adipisici elit

Settings and API

Show Methods

Form.init() to activate Floating Labels. See Forms Module.

Select.init() to apply default settings and initialize select2 on all js-select2 selects.

Use Select.apply($select, options); to apply your own options on a specific select-field. You can also extend the default options.

Available default options are

• Select.getDefaultOptions() @returns default settings for standard select-dropdowns
• Select.getOptionsWithSearch() @returns extended settings for select-dropdowns with search
• Select.getOptionsWithTags(unknownTerm) @returns extended settings for select-dropdowns with search and custom tags, @param {String} unknownTerm - optional parameter that describes the type of the "unknown custom tag" that is added

Show Settings

const settings = {
    selector: {
        selectField: ".js-select2",
        searchField: ".select2-search__field"
    },
    class: {
        jsClass: "js-select2",
        defaultClass: "c-select",
        isDisabled: "-disabled",
        hideDisabledOptions: '-hide-disabled-options',
        hiddenAccessible: "select2-hidden-accessible"
    }
};