Использование

1. Подключить jQuery и плагин.

<script src="path/to/jquery.js"></script>
<script src="path/to/jquery.nice-select.js"></script>

2. Подключить скомпилированный стиль плагина

<link rel="stylesheet" href="path/to/nice-select.css">

... или, идеально, импортировать SASS исходники (если вы используете SASS) в ваш главный стилевой файл для более удобной кастомизации плагина.

@import 'nice-select'; // Or 'nice-select-prefixed'. See 'Notes' section.

3. В заключении инициализировать плагин.

$(document).ready(function() {
  $('select').niceSelect();
});

Всё готово. Плагин изменить такой вид:

...на такой вид:

Нет настроек (стандартный select не имеет настроек), хотя есть несколько специальных функций описанных ниже.

Отображение текста

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

Добавьте атрибут data-display, чтобы задать этот альтернативный текст. Например:

<select>
  <option data-display="Выберите опцию">Ничего</option>
  <option value="1">Какая-то опция</option>
  <option value="2">Другая опция</option>
  <option value="3" disabled>Опция disabled</option>
  <option value="4">Еще опция</option>
</select>

Пользовательские классы

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

Некоторые примеры оформления включены в CSS плагина:

Методы

update

Обновляет кастомный dropdown, чтобы отразить любые изменения сделанные в оригинальном select.

$('select').niceSelect('update');

destroy

Удаляет кастомный dropdown и открепляет все обработчики событий.

$('select').niceSelect('destroy');

Заметки

• Если вы используете autoprefixer, то он добавит все необходимые вендорные префиксы для старых браузеров. Если же вы его не используете, то есть файл nice-select-prefixed.scss, который можете подключить к вашему основному файлу стилей.

• Иногда может наблюдаться кратковременная "вспышка", может промелькнуть стандартный select (между временем загрузки страницы и запуском скриптов). Это можно пофиксить, скрыв их зарнее в CSS:

  select {
    display: none;
  }

  Обратите внимание, что приведенное выше правило, скроет все стандартные select. Если вы применяете плагин только к некоторым select, то правило нужно откорректировать.