Select from HTML

Use data-toggle="better-nice-select" to transform a select from an existing, unformat html select field for multiple="multiple" select field or a single select field. To size the created select field, wrap it with a <div> tag and set the width and height CSS style of it.

The overlay which will be shown when clicked on the add icon is keyboard navigable with the Tab key to switch between the input and the first founded option. In addition, the Arrow keys can be used to navigate through the founded options, when you want to add it to the list. It got typeahead autocomplete functionality too!

Possible options to search for are: Banana, Apple, Orange, Lemon, Pepper, Mushrooms, Cabbages, Celery, Brocoli, Garlic

Single Select

<div class="container">
    <select data-toggle="better-nice-select">
        <option value="Banana">Banana</option>
        <option value="Apple">Apple</option>
        <option value="Orange">Orange</option>
        <option value="Lemon" selected="selected">Lemon</option>
        <option value="Pepper">Pepper</option>
        <option value="Mushrooms">Mushrooms</option>
        <option value="Cabbages">Cabbages</option>
        <option value="Celery">Celery</option>
        <option value="Garlic">Garlic</option>
        <option value="Brocoli">Brocoli</option>
    </select>
</div>

let elements = document.querySelectorAll('[data-toggle="better-nice-select"]');
elements.forEach(element => new betterNiceSelect.BetterNiceSelect(element));

Multiple Select

<div class="container">
    <select multiple="multiple" data-toggle="better-nice-select">
        <option value="Banana">Banana</option>
        <option value="Apple" selected="selected">Apple</option>
        <option value="Orange">Orange</option>
        <option value="Lemon">Lemon</option>
        <option value="Pepper">Pepper</option>
        <option value="Mushrooms" selected="selected">Mushrooms</option>
        <option value="Cabbages">Cabbages</option>
        <option value="Celery">Celery</option>
        <option value="Garlic">Garlic</option>
        <option value="Brocoli">Brocoli</option>
    </select>
</div>

let elements = document.querySelectorAll('[data-toggle="better-nice-select"]');
elements.forEach(element => new betterNiceSelect.BetterNiceSelect(element));

With group tag

When using <optgroup> tags, you can search for this labels in the search container to get a list of all possible options for the selected label.

<div class="container">
    <select multiple="multiple" data-toggle="better-nice-select">
        <optgroup label="Fruit">
            <option value="Banana">Banana</option>
            <option value="Apple">Apple</option>
            <option value="Orange">Orange</option>
            <option value="Lemon">Lemon</option>
        </optgroup>
        <optgroup label="Vegetable">
            <option value="Pepper">Pepper</option>
            <option value="Mushrooms">Mushrooms</option>
            <option value="Cabbages" selected="selected">Cabbages</option>
            <option value="Celery">Celery</option>
            <option value="Garlic">Garlic</option>
            <option value="Brocoli">Brocoli</option>
        </optgroup>
    </select>
</div>

let elements = document.querySelectorAll('[data-toggle="better-nice-select"]');
elements.forEach(element => new betterNiceSelect.BetterNiceSelect(element));

Disabled Component

You can set disabled="disabled" for the whole <select> field or for a single <option> element, so it can not be removed or new items can not be added. Setting the disabled tags works for remote data too, so they can be first time added but not removed afterwards.

Select Disabled

<div class="container">
    <select multiple="multiple" data-toggle="better-nice-select" disabled="disabled">
        <optgroup label="Fruit">
            <option value="Banana">Banana</option>
            <option value="Apple" selected="selected">Apple</option>
            <option value="Orange">Orange</option>
            <option value="Lemon">Lemon</option>
        </optgroup>
        <optgroup label="Vegetable">
            <option value="Pepper">Pepper</option>
            <option value="Mushrooms">Mushrooms</option>
            <option value="Cabbages" selected="selected">Cabbages</option>
            <option value="Celery">Celery</option>
            <option value="Garlic">Garlic</option>
            <option value="Brocoli">Brocoli</option>
        </optgroup>
    </select>
</div>

let elements = document.querySelectorAll('[data-toggle="better-nice-select"]');
elements.forEach(element => new betterNiceSelect.BetterNiceSelect(element));

Single Option Disabled

<div class="container">
    <select multiple="multiple" data-toggle="better-nice-select">
        <optgroup label="Fruit">
            <option value="Banana">Banana</option>
            <option value="Apple" selected="selected">Apple</option>
            <option value="Orange">Orange</option>
            <option value="Lemon">Lemon</option>
        </optgroup>
        <optgroup label="Vegetable">
            <option value="Pepper">Pepper</option>
            <option value="Mushrooms">Mushrooms</option>
            <option value="Cabbages" selected="selected" disabled="disabled">Cabbages</option>
            <option value="Celery">Celery</option>
            <option value="Garlic">Garlic</option>
            <option value="Brocoli" disabled="disabled">Brocoli</option>
        </optgroup>
    </select>
</div>

let elements = document.querySelectorAll('[data-toggle="better-nice-select"]');
elements.forEach(element => new betterNiceSelect.BetterNiceSelect(element));