MY SPELE
+380678383535
team@spele.ua

Списки

Вместо стандартных выпадающих списков используется библиотека jquery.Select2. Она позволяет упростить работу с выпадающими списками, и значительно расширяет возможности по стилизации выпадающего списка. Для инициализации данных выпадающих списков необходимо использовать класс .chzn-select.

По умолчанию выпадающий список является блочным элементом, что бы сделать его строчным - используйте модификатор .inline, это позволит выравнивать элемент на одной строке с другими элементам. Если нужно сделать мультисписок - нужно добавить атрибут multiple

 

<select class="chzn-select" style="width: 300px;">
  <option value="">Value 1</option>
  <option value="">Value 2</option>
  <option value="">Value 3</option>
  <option value="">Value 4</option>
  <option value="">Value 5</option>
</select>

<select class="chzn-select inline" style="width: 300px;">
  <option value="">Value 1</option>
  <option value="">Value 2</option>
  <option value="">Value 3</option>
  <option value="">Value 4</option>
  <option value="">Value 5</option>
</select>

<select multiple class="chzn-select" style="width: 300px;">
  <option value="">Value 1</option>
  <option value="">Value 2</option>
  <option value="">Value 3</option>
  <option value="">Value 4</option>
  <option value="">Value 5</option>
</select>


Списки c дочерними элементами

 

Данный тип выпадающего списка отличается от стандартного тем, что имеет древовидную структуру. Для использования данного типа выпадающего списка необходимо использовать класс .chzn-select-tree Уровни вложенности указываются для элементов option как data-level. Такие списки могут быть полезными при разработке выбора категории.

 

<select class="chzn-select-tree" style="width: 300px;">
  <option value="" data-level="0">Value 1</option>
  <option value="" data-level="1">Value 4</option>
  <option value="" data-level="0">Value 5</option>
</select>