Отправить заявку

Оформление Select при помощи JQuery

Все давно мечтают, что бы на чистом css+html можно было бы оформлять select option как душе угодно. Хочешь - с картинками, хочешь - с различной заливкой, хочешь - с поисков в самом селекте, хочешь - с интерактивным выбором при multiple select и т.д. К сожалению, без JS пока нельзя обойтись в этом направлении. HTML5 не предоставляют полной свободы действия над этими элементами.

Тег <select> позволяет создать элемент интерфейса в виде раскрывающегося списка, а также список с одним или множественным выбором, как показано далее. Конечный вид зависит от использования атрибута size тега <select>, который устанавливает высоту списка. Ширина списка определяется самым широким текстом, указанным в теге <option>, а также может изменяться с помощью стилей. Каждый пункт создается с помощью тега <option>, который должен быть вложен в контейнер <select>. Если планируется отправлять данные списка на сервер, то требуется поместить элемент <select> внутрь формы. Это также необходимо, когда к данным списка идет обращение через скрипты.

Есть довольно много, различных плагинов к различным js фреймворкам. Нам показался самым удачным из них - Chosen JQuery.

Много различных примеров и исходный код на github http://harvesthq.github.com/chosen/

Другие публикации