Form controls: Custom select

Вступление #

Кастомизация селекта, можно использовать по умолчанию класс .js-select и обычную разметку.

Установка #

Пример разметки и инициализации селекта.

    <select class="js-select">
        <option placeholder>Выберите фрукт</option>
        <option>Яблоко</option>
        <option>Апельсин</option>
        <option>Арбуз</option>
    </select>

    BasicSelect.init('.my-select');
    BasicSelect.init(document.querySelector('.my-select'));
    BasicSelect.init(document.querySelectorAll('.my-select'));

    // или

    BasicSelect.init(); // по умолчанию инициaлизирует элементы с классом .js-select

Так же можно заранее инициализировать с необходимыми параметрами:

	BasicSelect.init(document.querySelector('.my-select'), {
		'notfound': 'Увы, ничего не нашли',
		'placeholder': {
			'output': 'Список для выбора',
			'search': 'Искать'
		},
		'addClass': 'my-custom-select'
	});

Конфигурация #

Настройки, которые указываются при помощи специальных data-атрибутов.

data-select-options #

В значение указываются параметры для гибкой настройки кастомизированного селекта.

    <select
        class="js-select"
        data-select-options='{
            "enabledSearch": true,
            "notfound": "Увы, ничего не нашли",
            "placeholder": {
                "output": "Список для выбора",
                "search": "Искать"
            },
            "addClass": "my-custom-select"
        }'
    >
        <option placeholder>Выберите фрукт</option>
        <option>Яблоко</option>
        <option>Апельсин</option>
        <option>Арбуз</option>
    </select>

Параметры:

Название	Тип	Описание
`enabledSearch`	`boolean`	Показать поиск, по умолчанию `true`.
`notfound`	`string`	Текст при нулевом результате поиска, по умолчанию `ничего не найдено`.
`placeholder.output`	`string`	Текст-заглушка для вывода результата, по умолчанию `Выберите из списка`.
`placeholder.search`	`string`	Текст-заглушка для поля поиска, по умолчанию `Найти`.
`addClass`	`string/object`	Добавить доп.класс к кастомизированному селекту.

data-select-label #

По мимо текста, в дочерние элементы можно передать полноценную html-разметку(изображение, форматирование текста и т.д.).

    <select class="js-select">
        <option placeholder>Выберите валюту</option>
        <option data-select-label='<svg class="select-icon"><use xlink:href="#icon-usd"/></svg> Доллар'>Доллар</option>
        <option data-select-label='<svg class="select-icon"><use xlink:href="#icon-eur"/></svg> Евро'>Евро</option>
        <option data-select-label='<svg class="select-icon"><use xlink:href="#icon-rub"/></svg> Рубль'>Рубль</option>
    </select>

    <select class="js-select">
        <option placeholder>Форматирование текста</option>
        <option data-select-label='<i>Курсивом</i>'>Курсивом</option>
        <option data-select-label='<b>Жирный</b>'>Жирный</option>
        <option data-select-label='<s>Зачёркнутый</s>'>Зачёркнутый</option>
    </select>

Multiple select #

Список множественного выбора, для кастомизация достаточно добавить атрибут multiple.

    <select multiple class="js-select">
        <option placeholder>Выберите фрукты</option>
        <option selected>Яблоко</option>
        <option selected>Апельсин</option>
        <option>Арбуз</option>
        <option>Виноград</option>
        <option>Сливы</option>
        <option>Мандарины</option>
        <option>Грушы</option>
    </select>

Multiple так же поддерживает data-select-label.

    <select multiple class="js-select">
        <option placeholder>Форматирование текста</option>
        <option data-select-label='<i>Курсивом</i>'>Курсивом</option>
        <option data-select-label='<b>Жирный</b>'>Жирный</option>
        <option data-select-label='<s>Зачёркнутый</s>'>Зачёркнутый</option>
        <option data-select-label='<u>Подчёркнутый</u>'>Подчёркнутый</option>
        <option data-select-label='<mark>Выделенный</mark>'>Выделенный</option>
    </select>

Optgroup #

Установка #

Поддерживает группировку опций, находящиеся внутри селекта. Работает с селектами default и multiple.

    <select class="js-select">
		<optgroup label="Заголовки">
			<option data-select-label='Заголовок h1'>Заголовок h1</option>
			<option data-select-label='Заголовок h2'>Заголовок h2</option>
			<option data-select-label='Заголовок h3'>Заголовок h3</option>
		</optgroup>

		<optgroup label="Обычное форматирование">
			<option data-select-label='<i>Курсивом</i>'>Курсивом</option>
			<option data-select-label='<b>Жирный</b>'>Жирный</option>
			<option data-select-label='<s>Зачёркнутый</s>'>Зачёркнутый</option>
			<option data-select-label='<u>Подчёркнутый</u>'>Подчёркнутый</option>
			<option data-select-label='<mark>Выделенный</mark>'>Выделенный</option>
		</optgroup>
    </select>

Методы #

У групп есть свои отдельные методы.

groupСreate() #

Создать новую группу с опциями. Метод работает с селектами default и multiple.

    BasicSelect.groupСreate({
        "select": "#my-select",
		"name": "Новый optgroup",
        "value": [
            {
                "label": "<b>Новый пункт списка</b>",
                "value": "Новый пункт списка",
                "selected": true
            },

            {
                "label": "<i>Ещё один пункт списка</i>",
                "value": "Ещё один пункт списка",
                "disabled": true
            }
        ]
    });

где в конфигурациях указывается:

Название	Тип	Описание
`select`	`object`/`string`	Оригинальный селект(к примеру `.js-select`), для которого необходимо добавить новые элементы.
`name`	`string`	Название группы.
`value`	`object`	Список(ввиде массива) дочерних элементов группы, где `label` — это внешний вид элемента, а `value` — необходимое значение, `selected` — заранее выбрать новый элемент, `disabled` — заранее заблокировать элемент.

groupRemove() и groupRemoveAll() #

Удалить группы из списка. Методы работают с селектами default и multiple.

    BasicSelect.groupRemove({
        "select": "#my-select",
		"value": "Новый optgroup" // если надо удалить сразу несколько групп из селекта: ["Название группы 1", "Название группы 2"]
    });

	// или

	BasicSelect.groupRemoveAll("#my-select"); // удалить сразу все группы из селекта

конфигурации для groupRemove():

Название	Тип	Описание
`select`	`object`/`string`	Оригинальный селект(к примеру `.js-select`), у которого необходимо удалить элемент.
`value`	`string`	Название группы из списка, которую нужно удалить. Если необходимо удалить сразу несколько групп, то надо будет указать их название ввиде одного массива.

groupAdd() #

Пополнить группу новыми дочерними элементами. Метод работает с селектами default и multiple.

    BasicSelect.groupAdd({
        "select": "#my-select",
		"name":   "Название группы",
        "value": [
            {
                "label": "<b>Новый пункт списка</b>",
                "value": "Новый пункт списка",
                "selected": true
            },

            {
                "label": "<i>Ещё один пункт списка</i>",
                "value": "Ещё один пункт списка",
                "disabled": true
            }
        ]
    });

где в конфигурациях указывается:

Название	Тип	Описание
`select`	`object`/`string`	Оригинальный селект(к примеру `.js-select`), для которого необходимо добавить новые элементы.
`name`	`string`	Название группы, куда необходимо добавить новые элементы.
`value`	`object`	Список(ввиде массива) новых дочерних элементов группы, где `label` — это внешний вид элемента, а `value` — необходимое значение, `selected` — заранее выбрать новый элемент, `disabled` — заранее заблокировать элемент.

groupDisabled() и groupEnabled() #

Заблокировать/разблокировать группу из списка. Метод работает с селектами default и multiple.

    BasicSelect.groupDisabled({
        "select": "#my-select",	  	// оригинальный селект(к примеру .js-select).
		"value":  "Название группы" // название группы, которую необходимо заблокировать.
    });

	// или разблокировать

	BasicSelect.groupEnabled({
        "select": "#my-select",	  	// оригинальный селект(к примеру .js-select).
		"value":  "Название группы" // название группы, которую необходимо разблокировать.
    });

Методы #

add() #

Добавить новые элементы в список селекта. Метод работает с селектами default и multiple.

    BasicSelect.add({
        "select": "#my-select",
        "value": [
            {
                "label": "<b>Новый пункт списка</b>",
                "value": "Новый пункт списка",
                "selected": true
            },

            {
                "label": "<i>Ещё один пункт списка</i>",
                "value": "Ещё один пункт списка",
                "disabled": true
            }
        ]
    });

где в конфигурациях указывается:

Название	Тип	Описание
`select`	`object`/`string`	Оригинальный селект(к примеру `.js-select`), для которого необходимо добавить новые элементы.
`value`	`object`	Список новых элементов ввиде массива, где `label` — это внешний вид элемента, а `value` — необходимое значение, `selected` — заранее выбрать новый элемент, `disabled` — заранее заблокировать элемент.

choose() и chooseAll() #

Выбрать элемент/элементы из списка. Методы работают с селектами default и multiple.

    BasicSelect.choose({
        "select": "#my-select",
        "value":  "Пункт списка" // если необходимо выбрать сразу несколько элементов из списка: ["Пункт списка", "Ещё один пункт списка"]
    });

    // или

    BasicSelect.chooseAll('#my-select') // выбрать сразу все выбранные элементы из списка

конфигурации для choose():

Название	Тип	Описание
`select`	`object`/`string`	Оригинальный селект(к примеру `.js-select`), у которого необходимо выбраmь элементы.
`value`	`object`/`string`	Указывается значение элемента из списка, которое необходимо выбрать. Если необходимо выбрать сразу несколько, то надо будет указать их ввиде массива.

clear() и clearAll() #

Очистить селект от выбора. Методы работают с селектами default и multiple.

    BasicSelect.clear({
        "select": "#my-select",
        "value":  "пункт списка" // если надо очистить от несколько выбранных элементов: ["Пункт списка", "Ещё один пункт списка"]
    });

    // или

    BasicSelect.clearAll('#my-select') // очистить сразу все выбранные элементы из списка

конфигурации для clear():

Название	Тип	Описание
`select`	`object`/`string`	Оригинальный селект(к примеру `.js-select`), у которого необходимо очистить выбранные элементы.
`value`	`object`/`string`	Указывается значение выбранного элемента из списка, от которого надо очистить селект. Если необходимо избавиться от нескольких, то надо будет указать их ввиде массива.

remove() и removeAll() #

Удаляет дочерние элементы из списка. Методы работают с селектами default и multiple.

    BasicSelect.remove({
        "select": "#my-select",
        "value":  "пункт списка" // если надо удалить сразу несколько элементов из списка: ["Пункт списка", "Ещё один пункт списка"]
    });

    // или

    BasicSelect.removeAll('#my-select'); // удалить сразу все элементы из списка

конфигурации для remove():

Название	Тип	Описание
`select`	`object`/`string`	Оригинальный селект(к примеру `.js-select`), у которого необходимо удалить элемент.
`value`	`object`/`string`	Указывается значение элемента из списка, который нужно удалить. Если необходимо удалить сразу несколько элементов, то надо будет указать их ввиде массива.

show() и hide() #

Показать/скрыть выпадающий список селекта. Методы работают с селектами default и multiple.

    BasicSelect.show('#my-select'); // показать выпадающий список
    BasicSelect.hide('#my-select'); // скрыть выпадающий список

disabled() и enabled() #

Заблокировать/разблокировать селект. Методы работают с селектами default и multiple.

    BasicSelect.disabled('#my-select'); // заблокировать селект
    BasicSelect.enabled('#my-select'); // разблокировать селект

disabledOption() и enabledOption() #

Заблокировать/разблокировать дочерние элементы из списка. Методы работают с селектами default и multiple.

    BasicSelect.disabledOption({
        "select": "#my-select",
        "value":  "пункт списка" // если надо заблокировать сразу несколько элементов из списка: ["Пункт списка", "Ещё один пункт списка"]
    });

    // или разблокировать

    BasicSelect.enabledOption({
        "select": "#my-select",
        "value":  "пункт списка" // если надо разблокировать сразу несколько элементов из списка: ["Пункт списка", "Ещё один пункт списка"]
    });

destroy() #

Уничтожает экземпляр кастомизированного селекта и возвращает оригинал в первоначальный вид. Метод работает с селектами default и multiple.

    BasicSelect.destroy("#my-select");

Прослушивание событий #

Можно прослушать события элемента и получить необходимые параметры.

select choice #

Срабатывает при выборе элемента из списка.

Параметры:

Название	Тип	Описание
`event.detail.el`	`object`	Селект(`.js-select`).
`event.detail.select`	`object`	Кастомизированный селект.
`event.detail.index`	`number`	`index` селекта.
`event.detail.previous`	`object`	Предыдущий выбранный элемент из списка.
`event.detail.target`	`object`	Элемент из списка, на котором произошло основное событие.
`event.detail.selected`	`boolean`	Указывает статус выбранного элемента.
`event.detail.value`	`string`	Значение селекта.

    document.querySelector('#my-select').addEventListener('select choice', function() {

        console.log(event.detail); // параметры

    }, false);

select clear #

Срабатывает при очистке селекта от выбора.

Параметры:

Название	Тип	Описание
`event.detail.el`	`object`	Селект(`.js-select`).
`event.detail.select`	`object`	Кастомизированный селект.
`event.detail.index`	`number`	`index` селекта.
`event.detail.previous`	`object`	Предыдущий выбранный элемент из списка.
`event.detail.selected`	`boolean`	Указывает статус выбранного элемента.
`event.detail.value`	`string`	Значение селекта.

    document.querySelector('#my-select').addEventListener('select clear', function() {

        console.log(event.detail); // параметры

    }, false);

select visibility #

Срабатывает при показе/скрытия выпадающего списка селекта.

Параметры:

Название	Тип	Описание
`event.detail.el`	`object`	Селект(`.js-select`).
`event.detail.select`	`object`	Кастомизированный селект.
`event.detail.index`	`number`	`index` селекта.
`event.detail.show`	`boolean`	Указывает статус видимости списка селекта.

    document.querySelector('#my-select').addEventListener('select visibility', function() {

        console.log(event.detail); // параметры

    }, false);

Моб.версия #

Кастомизированный селект можно адаптировать под моб.версию и для этого достаточно прописать соответствующие стили.

В данном примере, селект реализован в виде попапа.

Пример стилизации:

	.select-overlay {
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		position: fixed;

		opacity: 0;
		visibility: hidden;

		z-index: 999;
		padding: 10px;
		cursor: pointer;
		display: flex;
		align-items: center;
		justify-content: center;
		background-color: rgba(30,30,30,.81);
	}

	.select-dropdown {
		top: auto !important;
		position: relative;

		width: 100%;
		max-width: 320px;
		border-radius: 5px;
	}

	.select--open .select-overlay {
		opacity: 1;
    	visibility: visible;
	}