Вместо стандартных выпадающих списков используется библиотека 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>