Однако есть небольшой минус - если раскрыть обычный выпадающий список, то не обязательно выбирать значение - можно кликнуть в пустое место на странице и тогда он автоматически уберется с экрана (закроется). Однако в этой реализации список убирается только если выбрать одно из значений. Понимаю, что не всем нужна такая функциональность, но мало ли ;)

P.S. проверял только в Maxthon (IE6).

Давайте опишем плюсы: красиво выглядит.

Давайте опишем минусы:

— Пытаюсь попасть на этот элемент клавишей таб: никак, в том числе и открыть.
— Открываю этот «селект» руками: курсор почему-то pointer. М?
— Пытаюсь работать: клавиши вверх/вниз и пробел/ввод не воспринимает, подбор по первой букве слова не работает.
— Пытаюсь закрыть выпадающий список без выбора чего-либо (в случае, если это поле не является обязательным для заполнения) — ни фокус на друом элементе формы, ни клик по окружающим элементам не приводит к закрытию этого существа.

И что же мы имеем? Абсолютно бесполезную вещь.
За статью как всегда спасибо ;) Но на вещи всё-таки стоит смотреть более трезво. А то вернёмся к DHTML'ю муравьями, которые бегают за курсором…

Pointer убрал.

Подбор по первой букве сделать можно, но скрипт станет сложнее, а ведь такой функционал нужен только если опций много.

Закрытие по клику на другие элементы, действительно упустил, сделаю.

Tab работает, элемент при этом подсвечивается, и можно листать список стрелками, как в обычном select

Сорри, я смотрел в Safari, там от всего этого великолепия мало что осталось и кое-что неожиданное появляется. В Firefox при выборе пункта после передвижения по Tab'у одна за другой вылезают ошибки «li has no properties».

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

Не работает Alt-ArrowDown, у меня вообще не получается его раскрыть с клавиатуры :-( Про ошибку в JavaScript "li has no properties" уже сказали.

ЗЫ. Я не имею ничего против замены стандартных контролов нестандартными, если только это работает ожидаемо.

— нехарактерное поведение для этого элемента управления (даже если научить его скрываться при потере фокуса): возможность перемещаться по элементам по мере ввода с клавиатуры, может, и не нужна для коротких списков, но пользователь может попытаться пользоваться ей просто по привычке. И будет неприятно удивлен. Думаю, добиться полного соответствия в поведении стандартного элемента и эмулированного на JS будет очень нелегко, а пока этого не произойдет, пользователей будут ждать разные сюрпризы, преимущественно неприятные.

— но есть и более серьезный недостаток, который неизбежно вытекает из того преимущества, ради которого все и было затеяно (сам плохо понял, что написал). Это — настраиваемость внешнего вида. То есть вместо привычного для себя select'а пользователь увидит что? Да что угодно, только не нормальный select! И нет никакой гарантии, что он сразу поймет, что это перед ним, и что надо с этим делать. Если бы я не знал, о чем читаю, то полагаю, что увидев такой контрол, растерялся бы на несколько секунд как минимум. Пользователь привык видеть контролы такими, какими он привык их видеть, -) и не надо ломать его привычек. В этом вопросе я бы отдал предпочтение принципу "пусть безобразно, зато однообразно". Хотя все это — сугубо мое личное мнение.

Впрочем статья от этого не теряет ценности в качестве учебного материала. Спасибо за нее -)

Кстати о длине, что будет, если элементов 50-100? скроллбар? как оно будет себя вести? Какие элементы покажутся при раскрытии списка? Как будут работать стрелки вверх/вниз, page up/page down, home/end? Обычно все скрипты страдают этой проблемой...

Понял, что возможность перемещения по буквам нужна обязательно, добавлю.

Хм, я посмотрел, стандартные селекты листаются стрелками не открываясь.

Хм, я посмотрел, стандартные селекты листаются стрелками не открываясь.

А если alt зажать? :-)

Хм, я посмотрел, стандартные селекты листаются стрелками не открываясь.

Alt+стрелка вниз

А если alt зажать? :-)

я и не знал, что их с альтом можно :)
как выловить такую комбинацию подскажете?

как выловить такую комбинацию подскажете?

Есть тут одна мысль - стандартный select оставить.
Разве что из спортивного интереса этот скрипт можно еще помучить -)

как выловить такую комбинацию подскажете?

event.shiftKey
event.altKey
event.ctrlKey

Есть одна идея, но требует полной реорганизации этого скрипта займусь завтра.

Подумайте как это будет работать на коммуникаторах? С отключенной графикой?

Хм, я посмотрел, стандартные селекты листаются стрелками не открываясь.

не везде. В сафари открываются.

Мне нравится такое решение
http://c82.net/samples/checklist-samples.html
Хотя оно громоздкое и поиск по буквам не работает, но красивое.
Для НЕмультивыбора, checkbox заменить на radio.

Не нравится нестандартный селект? Давайте тогда заменим меню на сайтах как [File] [Edit] [View]. Вы пользователей совсем уж тупыми считаете.

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

С раскрытием по alt+вниз проблемы, причем не столько с самим раскрытием сколько с тем что в опере раскрывается и оригинальный select, к тому же, при раскрытом табе onchange только после выбора пункта происходит.

Видимо оринальный select придется скрыть совсем, а для получание фокуса использовать спрятанное текстовое поле, минус решения в том, что придется по буквам выбирать самостоятельно, но как плюс будут работать русские буквы в Opera и FF.

Что касается нестандартности оформления, то помоему не проблема нарисовать select по которому будет однозначно видно, что это select.

Повторять поведение стандартного элемента, тоже не проблема, а вот отключенная графика это да, стрелку ведь без графики ни как не нарисуешь. Хотя можно попробовать изобразить ее несколькими блоками, но возникает вопрос, как определить, что графика не загружена? (есть, конечно, идеи, но хочется сначала узнать, что нибудь новое).

Поскольку скрипт постоянно изменяется убрал второй пример.

Для соблюдения taborder`а при раскрытии списка передаваля фокус соответствующему select, а при нажатии tab список должен был сворачиваться по blur. При клике мышкой получалось, что select терял фокус и список сворачивался по blur, события click вообще не происходило (почему? ведь должно быть хотя бы в пустое место). Вместо blur теперь обрабатываю клавишу tab, заработало.

Оффтоп: пошел качать Safari немного удивило то? что по умолчанию галочка стоит на версии для Windows, как-то не патриотично для Apple :)

Не нравится нестандартный селект? Давайте тогда заменим меню на сайтах как [File] [Edit] [View]. Вы пользователей совсем уж тупыми считаете.

Это нормально. Лучше недооценить пользователя и сделать интерфейс проще, чем чуть-чуть переоценить и получать жалобы.
Где-то даже попадались обобщенные правила, как создать юзабильный интерфейс. Там (утрированно) говорилось, что лучше предполагать, что пользователь читать не умеет. Потому что он никогда не читает хелп и текст в диалоговых окнах, и ведь это так!

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

Пусть лучше контрастируют, чем причиняют неудобства.

Вы, судя по всему (без обид) судите о юзабилити только по личным наблюдениям. Ознакомьтесь с литературой по этой теме, часто это "открывает глаза".

Оффтоп: пошел качать Safari немного удивило то? что по умолчанию галочка стоит на версии для Windows, как-то не патриотично для Apple :)

Думаю, у них просто определяется ОС посетителя -) Это, как раз, пример внимательного отношения к юзабилити.

Но если вернуться к спортивному интересу, то скрипт достоин похвалы. Оригинальную версию скрипта изучал еще давно, ваши дополнения его значительно улучшили. Не тестировали его на скорость загрузки, скажем сайта с тремя селектами?

Не тестировали его на скорость загрузки, скажем сайта с тремя селектами?

В скрипте нет ничего столь затратного, чтобы можно было заметить замедление на трех селектах поэтому я потестил с 50 селектами, никаких заметных тормозов нет, при том что обработчик стоит на событии load, а можно поставить на DOMContentLoaded (на реальных сайтах так и нужно) тогда замена будет происходить еще раньше.

if(s[i].className.search('replaceThisSelect') != -1 )
    rsSelectReplace(s[i]);

пример

А я просто пользуюсь готовыми JavaScript компонентами NWS…

Я тоже с в основном пользуюсь готовыми компонентами, но иногда хочется придумать, что-то свое, а иногда готовым компонентам не хватает чего нибудь, что нужно в конкретном случае.

Ещё бы добавить скрытие списка при нажатии Escape

Спасибо за ценное замечание, доработаю.

Так что пришлось дорабатывать выложенный тут пример под свои нужды, как умеем.

Может быть, я не просто не нашел версии тут нужной, но, Евгений, сворачивание без выбора так и не было вами доделано?

Главный баг, в общем. ради которого я пишу сюда - в IE6 при прокрутке мышью страницы с открытым селектом, почему-то не страница прокручивается, а выбранный предыдущий элемент! Т.е., если список будет большим, то страницу просто напросто не прокрутить..=(

Именно спрятанные дефолтный селект создает некоторые проблемы, в ближайшее время я постараюсь вернуться к этой тематике и сделать более функциональный элемент. Основная мысль такая, избавляемся от select совмем, фокус и события ловим через input text, а отсылаем значение через input hidden (через text будет не очень удобно), при этом можно организовать удобный поиск по списку и при желании что-то вроде suggestions.

Для сворачивания, если мышь уходит, лично я доделал так, хотя, наверное, коряво это весьма:

srAddEvent(window, 'mousemove', srOnDocumentClick); //для FF
document.body.attachEvent("onmousemove",srOnDocumentClick); //для IE и остального..почему-то с srAddEvent такой же код добавления события не сработал...

а у самого списка и таблицы обрамляющей добавлено onmousemove="event.cancelBubble = true"

Будем ждать ваших профессиональных решений =)

Но на практике, ради дропдауна увеличивать страницу на порядка 10-ти килобайт кода, помоему это многовато, для обычного дропдауна.

Опуская вышесказанное, нужна ещё функциональность, а именно:
1. Ширина. В обычном дропдауне, она подбирается автоматически, в зависимости от максимальной ширины строки. Зачастую заранее не знаешь, какой ширины будет используемая строка. А в этом, она прибита гвоздями, причём для нескольких дропдаунов на странице, она всегда будет одинакова, что не простительно.
Нужно иметь выбор, либо прибить ширину гвоздями, либо она подбирается автоматически.
2. Стили. Какой ни какой стандартный дропдаун, но всётаки, коекакие стили на него можно положить. Этот-же имеет всегда один стиль. Нужна возможность задания стиля для каждого дропдауна на странице.
3. Неприятность с большим выбором. Что мы имеем в обычном дропдауне, когда его список очень велик, и не умещается на одной странице? Правильно. Появляется роллер прокрутки всего списка. Что мы видим тут? Ого. Растягивание всей страницы на всю длинну дропдауна. Это просто непростительно, ни с какой точки зрения, даже если этот дропдаун идеально заточен под общую стилизацию страницы.
4. Первая строка. Было-бы не плохо, таки оставлять первую строку выбора (та что со стрелкой), и уже под ней разворачивать весь список. Это будет более наглядно, и красноречиво говорить о том, что это именно дропдаун, а не что-то другое.

http://alx.vingrad.ru/fwc/ru/doc-intro
Может это кому-то подойдет?
Сам еще не пробывал реализовать.

Пробовал srAddEvent(window, 'load', srReplaceSelects); подставлять непосредственно в html, но это не принесло результатов.

Единственный случай, с которым я сталкивался и когда реализация такого решения была оправданна - написание WYSIWYG на javascript. Там надо было выбирать стили применяемые к текту и в выпадающем списке надо было каждый вариант написать своим стилем. А стандартный селект такого не дает :(

Очень не советую применять такое в стандартных формах. У меня например для всех форм стоит автозаполнение и такие вещи как страна например и т.п. всегда предустановлены. Попробуйте реализовать это в нестандартном селекте.

З.Ы. Дизайн должен точиться под функционал, а не функционал под диз. Если стандартный селект сильно контрастирует с дизом, измените дизайн.