Все прекрасно знают, что изменить оформление SELECT'ов в форме это сплошной геморрой. Ни один раз сталкивался с тем, что у сайта с симпатичным дизайном установлены уродливые SELECT'ы, полностью выбивающиеся из того самого дизайна. И это не говоря о том, что в различных браузерах они выглядят по-разному.
Стили CSS довольно скудно позволяют настраивать внешний вид SELECT'ов: им можно задать цвет бэкграунда, но при этом нельзя в качестве бэкграунда задать картинку. О чём думали, когда это делали?
Изменить оформление злосчастного выкидного списка можно и помогает в этом нам jQuery и другие подобные библиотеки. Плагины для этих библиотек подменяют стандартный селект на выкидной список, сделанный из классических тегов <div>, <p>, <ul> и так далее, а с ними CSS нам позволяет работать на все 100%.
Тем не менее не всё так гладко, как хотелось бы. Очень много рыская в интернете в поисках подобных скриптов, я натыкался на различные вариации, обладающие различными недостатками, из-за чего проблему замены SELECT'ов я считаю довольно актуальной. Я не буду приводить всё, что я нашёл, остановлюсь на нескольких.
Изменённые SELECT'ы без полосы прокрутки
Это наиболее распространённые селекты, недостаток которых указан в названии. Зачастую они прекрасно работают, ничего более и не надо, однако если список превышает 15-20 элементов, то страница растягивается очень далеко, а у селекта нет никаких полос прокрутки. Проблема? При больших списках не просто проблема, а катастрофа.
К примеру, в ссылках чуть ниже показаны пару таких плагинов.
SELECT'ы, заточенные под старинные версии библиотек
Оставляю пункт без комментариев и примеров, так как кому нужны примеры для jQuery 1.0.1 и подобных.
Адекватные оформления SELECT'ов
Самый адекватный скрипт, представленный по ссылкам с примерами чуть ниже, оказался находкой. Всё хорошо, всё красиво, есть даже очень приятный плюс, заключающийся в том, что есть возможность автозаполнения — прописываешь название (как в input'е) и он тебе выберет и покажет доступные варианты.
Однако и здесь также нашлись НО. Самое главное из них заключается в том, что при наличии нескольких селектов на странице (а может даже и одном, но большом, не проверял) оформление сглюкивает из-за медленного рендеринга страницы. У меня часто пропадали полосы прокрутки в селекте.
Тем не менее, это один из лучших, найденных мною, плагинов по изменению оформления SELECT'ов. И, что самое приятное, он постоянно дорабатывается. К концу этого месяца обещали выпустить новую версию, в которой как раз таки должна быть решена проблема рендеринга.
Напоследок
Напоследок хочется сказать, что не было найдено ни одного примера оформленных зависимых селектов — тех, в которых выбираешь в первом селекте одно, в зависимости от этого подставляются значения во втором селекте и так далее. Хотя такой пример можно будет сделать. Полагаю, если представленный чуть выше плагин будет обновлён и будет обезбаган, то взяв его за основу я, наверное, сделаю такие списки. Но это как-нибудь потом.
[UPD] Пока писал пост, плагин с сайта xiper.net взяли и обновили, буквально вчера, уже успели выявить несколько недочётов. У него теперь есть своё название - cuSel. Потестить плагин ещё не успел, но, думается, нововведения придутся по вкусу. Ссылки на плагин я чуть выше изменил - под кнопкой "Пример 1" пример необновлённого плагина, а под "Пример 2" - пример с обновлённым плагином.
(голосов: 11, средний: 3.45 из 5)Похожие записи:
Загрузка ...
12/07/2010 at 22:40 Постоянная ссылка Цитировать
Спасибо за статью! Сам пару раз сталкивался с тем, что не найти нормального скрипта для изменения селектов. Прямо беда какая-то.
15/07/2010 at 12:36 Постоянная ссылка Цитировать
Пожалуйста! Сам замучился, пока нашёл то, что нормально работает.
17/09/2010 at 18:02 Постоянная ссылка Цитировать
Да что Вы трындите, нормально работает. Нихрена нормально не работает. Ни первый пример ни второй.
Onchange для селекта не обрабатывают. Вернее не все. С onchange=”document.getElementById(‘code’).innerHTML=this.options[this.selectedIndex].value;” так и не удолочь подружить ни один из этих скриптов.
23/02/2011 at 22:18 Постоянная ссылка Цитировать
А как он работает с пхп? Получение value через посты и геты пашет?
23/02/2011 at 23:34 Постоянная ссылка Цитировать
Естесственно. Иначе бы нафиг оно надо было=)
Помню только в старой версии скрипта были проблемы, но они давно уже исправлены, так что можно смело использовать. К тому же авторы уже сделали скрипт с изменением оформления мультиселектового списка, можно найти на их сайте
23/08/2011 at 19:36 Постоянная ссылка Цитировать
Сделал нестандартный селект на jquery. Можно скачать одним архивом.
divhack.com/node/15
корректно работает в ie7, ie8, chrome, safari, firefox, opera.
Отправка данных на сервер осуществляется через скрытый через display:none стандартный селект.
24/08/2011 at 0:42 Постоянная ссылка Цитировать
а полоса прокрутки у него при куче вариантов появляется?
03/03/2012 at 2:55 Постоянная ссылка Цитировать
Почитайте еще один скрипт verstkawebsaita.ru/masterskaya-verstalshchika/veb-formy/select-selekty/nestandartnye-select-selekty-form-na-jquery
работает в ie6
11/02/2013 at 14:57 Постоянная ссылка Цитировать
Просветите, плиз.
В примере №1 есть реализация поиска значения (автозаполнение), но во втором примере (апгрейде) такой фишки нет? Или я что-то не так делаю, не туда смотрю и т.д.?
Мне нужен как раз селект с возможностью автозаполнения (поиском доступных вариантов).. подскажите, если знаете подобные скрипты.
Заранее спасибо
11/02/2013 at 23:03 Постоянная ссылка Цитировать
битая ссылка была, а это не битая, всегда его использу, никаких проблемм
verstkawebsaita.ru/ms/veb-formy/selects/nestandartnye-select-selekty-form-na-jquery
12/02/2013 at 10:58 Постоянная ссылка Цитировать
Allexandriya, jQuery Combobox и jQuery Autocomplete Plugin посмотрите. Был ещё один неплохой, но сейчас ссылку не могу найти ( Пооперируйте в яндексе с сочетанием Autocomplete и jQuery.
05/02/2014 at 12:10 Постоянная ссылка Цитировать
По моим наблюдениям, лучше не использовать колхоз (закрывать стандартную стрелку SELECT и вешать свое изображение), некоторые браузеры кашу выдадут, плагины эти хз кем написаны, может он криворук еще тот;) ИМХО единственное норм решение на джиквери, скрываешь стандартный селект, предварительно поставив на option value, рядом вешаешь простой список, которому придаешь нужный вид и проставляешь каждому li такой же value как и в option-ах, вешаешь клик или хувер на ul (чтобы открыть список), на каждый li вешаешь обработчик клика. Решение подходит для всех браузеров начиная с IE 6. Пользуйтесь на здоровье;)
05/02/2014 at 12:53 Постоянная ссылка Цитировать
По факту да, сейчас все адекватные скрипты именно скрывают обычный селект и заменяют его теми же списками ul, стилизуя их как угодно. Минус основных плагинов в том, что при наличии огромных списков они не имеют скролла, который по сути также нужно создавать плагинами для нормальной стилизации.
Уже давно использую cuSel, вроде как единственный адекватный и нормальный плагин, который может всё, что нужно =)