[Select-Form]: Пишем свой select-список, используя jQuery и CSS

[k12th]

Делать реиспользуемый компонент и обращаться к нему по id — грубейшая ошибка и в стилях и в скриптах.

Писать атрибуты без кавычек можно, но не стоит, особенно классы — их нередко надо добавлять-убирать. Ну а раз один атрибут пишем с кавычками, то и остальные лучше тоже — чтобы не задумываться каждый раз.

Отступы в стилях поехали — где один пробел, а где один таб.

В скрипте неконсистентные кавычки, где одинарные, где двойные — причем в одной строке. Выберите один стиль и соблюдайте его (хинт: большинство выбирает одинарные).

[naburamora]

спасибо за ваш комментарий, все учту! :)

[smurov]

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

[naburamora]

кстати, да, на тот момент не задумался, что лучше сделать класс, буду исправляться, спасибо! :)

[papikus]

Велосипед, и боль у тех, кто отключил скрипты. Лучше делать стандартные select-ы, и преобразовывать их в кастомные при загрузке.

[pashted]

интересно, много таких умников в интернете, кто отключает скрипты и радуется неработающим сайтам?

[Epsil0neR]

а как отображается выпадающее меню когда в низу страницы расположен контрол или когда места не хватает т.к. маленький экран?

[jMas]

Хороший вариант, когда кстомный селект просто кладется рядом с существующим <select> (который хайдится) и просто меняет selected в нем, попутно триггря событие change. Да еще и слушает исходный <select> на предмет изменений <option> или value.

[jMas]

Иногда нужно, когда обычного селекта не хватает. Например селект с поиском или placeholder-ом.

[jMas]

Тогда уж...

<label tabindex="-1">
    <select>...</select>
</label>

[Ohar]

Пишем свой select-список, используя jQuery

Заминусовал

[zxcabs]

Прям сборник антипаттернов всего в трех файлах.

[PaulZi]

Ну и в копилочку — нет управления с клавиатуры.

[xakepmega]

В 2016м никто не пишет на jquery

[naburamora]

надо же с чего-то начинать :)

[Akdmeh]

В работе встречал довольно старый проект cuSel, правда, он уже довольно давно заброшен.
С плюсов было то, что он брал существующие select-формы и перерабатывал их сам.
Подумайте над этим направлением, а не требовать создавать собственную верстку для HTML

[newkamikaze]

Код, конечно, трешовый, но спасибо за то, что навели на мысль изобрести свой вариант этого велосипеда. По работе часто нужен кастомный селект, а тащить ради этого jqueryui ил другой плагин неохота.
Буду благодарен, если кто-то подскажет, какие требования и «фичи» необходимы для такого плагина.

[naburamora]

конечно, трешовый, не буду спорить.
нужно подключить библиотеку jQuery и файл css, где описаны стили к соответствующим элементам.

[newkamikaze]

Проблема тут не столько в jQuery и CSS. Основные минусы тут указали и не раз: невозможность повторного использования на одной странице, специфичная для данного плагина вёрстка, ну и неряшливое оформление кода.
Я, как и писал, начал баловаться с написанием своего велосипеда. У того, что сделал, логика такая:

• класс присваивается нативному селекту
• плагин оборачивает его блоком и в него же (после селекта) добавляет свой сгенерированный html
• селект прячется
• при выборе элементов в кастомном селекте, они применяются и к скрытому нативному

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

[x893]

А такой же пример для древовидного списка можно выложить?

[naburamora]

С древовидным списком подобного не делал, но можно попробовать. В принципе, вы можете сделать лучше :)

[x893]

Конечно в теории каждый может сделать лучше. Я думал — может уже есть. Обычных списков много — деревьев мало.

[SkyCat]

Чем не подошел Select2?

[deamondz]

http://codepen.io/deamondz/pen/WGyKKq

[ambientos]

Здравствуйте, а в каком файле сам select? Не нашел что-то.

[serginhold]

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