Bootstrap select

Очень интересный плагин, который расширяет функционал и возможности кастомизации стандартного select'а, который есть в классическом bootstrap'е. 

В header подключается файлы - bootstrap-select.min.js, bootstrap-select.min.css. 

В документе инициализация скрипта происходит следующим образом: 

<script>
 jQuery('#category_id').selectpicker({
  style: 'btn-default',
  size: 4
 });
</script>

,где style - это класс bootstrap для стиля кнопки, а size - это количество видимых option, которые будут показываться во время прокрутки. 

Кроме того, указывая дополнительные атрибуты в тэге select, мы можем кастомизировать наш select. Я молчу про такой стандартный атрибут, как multiple и тэг optgroup - плагин их понимает на ура. А вот следующие параметры способны вызвать интерес: 

data-live-search="true" - у нас получается своего рода умный поиск среди значений существующих селектов. А указав атрибут data-tokens="word1 word2"  тэгу option мы можем добавить ключевые слова, по которым элементы option так же попадут в выборку. 

title="Choose value" - подсказка для select, если не выбрано ни одного значения. 

data-style="btn-primary" - стилизация select в стиле стандартных классов bootstrap.

data-actions-box="true" - используется для добавления множественных операций. 

Если требуется стилизовать отдельный option, то здесь так же не возникает никаких проблем. Просто указываем ему нужный класс и далее уже цепляем правила. Прописывая атрибут data-icon="glyphicon-heart", мы можем добавить бутстраповские иконки. 

В целом у элемента много атрибутов и дополнительных элементов стилизации. Ознакомиться со всеми можно по адресу: 
http://silviomoreto.github.io/bootstrap-select/examples/