JS-плагины №8. Кастомный селект на сайт - Choices.js

[@maxgraph]

Как вам новая обложка js-плагинов?) вернуть старую, или оставить эту?

[@ЕвгенийРусских-г8е]

А она поменялась? Нормальная обложка. И та нормальная, если разница в глаза не бросается. Главное - контент, а не обложка... P.S.: посмотрел прошлую - те же шары в профиль ;)

[@maxgraph]

@@ЕвгенийРусских-г8е была белая, теперь такая :) полностью поменялась я бы сказал.

[@mykhailo6062]

Мне очень понравилась обложка. Спасибо тебе за труды твои 👍👍👍

[@maxgraph]

@@mykhailo6062 спасибо)

[@VoLaND0303]

👍👍👍

[@nemercevroman]

уже раз четвертый за неделю захожу что бы освежить память или уточнить что нибудь, отличное видео!

[@danevgen]

Спасибо! Гораздо лучше кастомизируется, чем select2, имхо

[@ВладиславКаташинський]

Видео интересное, но все-таки решил юзать react-select он поинтереснее будет и поддержка у него лучше

[@АлександрМелянюк-ц9ю]

Спасибо! Побольше JS'а от Вас!!!

[@maxgraph]

Еще про html не все рассказал)) но да, js будет

[@АлександрМелянюк-ц9ю]

@@maxgraph Спасибо!

[@הודיהבכור]

Здравствуйте! Есть плагин селекта в котором можно еще стилизовать и скроллбар помимо самого селекта?

[@summersbyy]

Волшебное видео, как всегда) Было бы еще здорово рассказать, как заменить стрелочку на свою)

[@maxgraph]

Ну по сути просто найти её в девтулс да заменить)) Спасибо!

[@Olga-Bindasova]

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

[@svet0v]

Супер. Побольше бы подобных видео

[@maxgraph]

Пожалуйста)

[@nemercevroman]

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

[@nemercevroman]

id удалось вызвать через консоль, тем не менее событие при 'click' не сработало

[@a.k.9386]

Спасибо, большое!

[@maxgraph]

Пожалуйста)

[@МаксимКарелин-и8в]

Дружище спасибо тебе большое!

[@maxgraph]

Пожалуйста)

[@miraclescalp]

Надеюсь ты в будущем станешь более узнаваемым, видео очень информативные) Топлю за тебя( и хотел спросить, стоит ли учить одновременно python и js? или быстро перегорю )

[@maxgraph]

Лучше что-то одно хотя бы на среднем уровне)) а потом второе Спасибо!

[@МихаилМищуков]

Здравствуйте! А можно ли как-то с помощью этого плагина сделать 2 селекта, которые различаются внешним видом ?

[@rssreader90]

О личный вопрос, тоже ищу информацию

[@МихаилМищуков]

@@rssreader90 можно сделать, придётся только с классами в css поиграть, если нужны разные по виду

[@Евгений-х7п9с]

Спасибо, то что нужно

[@maxgraph]

Пожалуйста)

[@olegkuntsevich5501]

Добрый день! Всё замечательно, но у меня при вставке в DOM 3-го селектора возникает ошибка: "Trying to initialise Choices on element already initialised".

[@maxgraph]

Значит ошибка в коде, уже инициализирован данный элемент

[@olegkuntsevich5501]

@@maxgraph Решил проблему через добавления уникального класса с помощью счётчика

[@andreyputsillo255]

Здравствуйте. Подскажите как поменять бэкграунд у элемента списка, на который наводишь мышку либо же он выделяется с помощью клавиатуры. Я так понимаю за это отвечает класс is-highlighted ? Не могу прописать синтаксически правильную строку кода...

[@maxgraph]

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

[@andreyputsillo255]

Увы, так: .is-highlighted { background-color: green; } не работает. бэкграунд всё такой же серый...

[@АннаЕгорова-н4м]

Спасибо, очень помог)

[@maxgraph]

Пожалуйста)

[@ИгорьКим-й4л]

Здравствуйте Максим , такой вопрос , почему когда я устанавливаю плагин Choices , то элементы селекта выстраиваются не как у меня в html было прописано, а по алфавиту ? как с этим бороться ?

[@maxgraph]

В настройках плагина есть отключение сортировки)

[@balbe666]

При перезагрузке страницы обновляются имена Id на абсолютно рандомные, исходя из этого скрытие placeholder по id не срабатывает, может, возможно это побороть?

[@balbe666]

Нашел решение.

[@Alexandr_16kz_22rus]

@@balbe666 дружище, как сделал? Я не могу пока сообразить...

[@sostav5]

Здравствуйте! Вы не помните какое решение здесь было?

[@nemercevroman]

так здорово, что ты нашел решение!

[@АлександрДунаев-к9э]

Отличное видео. Подскажите, как исключить из списка уже выбранный элемент. пример: список из 4 элементов и если 1 выбран, то его в списке выбора нет, при выборе 2го 1й в списке выбора появляется и т.д. Надеюсь понятно изложил мысль )

[@maxgraph]

Здравствуйте. Спасибо) Нажатому элементу добавляется класс, через него можно скрыть

[@Илья-к9м3в]

Отличный материал! Подскажите как сделать плавное открытие/закрытие селекта?

[@maxgraph]

конкретно с этим плагином будет проблематично, т.к. он использует overflow.

[@Red_Sky_92]

От души!!!! =)

[@sencorio]

Добрый день! Как сделать, чтоб один вариант выбора option всегда был виден? Например, есть Введите пол. И ниже видно какой вариант по умолчанию

[@maxgraph]

Здравствуйте! Сделать первый пункт в изначальном селект можно с пустым value

[@KrZn104]

Видос бесспорно хорош, но лучше бы ты показал, как сделать данный плагин с нуля, либо просто сделал бы select с нуля, но уже с полным функционалом на div-ах, как в этом плагине! Спасибо за старание!

[@maxgraph]

Это более сложная тема, но она в планах :)

[@Ольга-р9й6т]

Максим, добрый день! Не могли бы вы подсказать, как поменять местами элементы выпадающего списка в селекте? Спасибо)

[@maxgraph]

А для чего это? Как указываете в html, так пусть и идут

[@Ольга-р9й6т]

@@maxgraph так в том то и дело, что порядок, прописанный в html, по непонятной причине нарушился... мне рекомендовали список залить массивом через js

[@НаталияЧамарова]

Очень нужное видео! Подскажите, пожалуйста, как изменить кнопку?

[@maxgraph]

Какую?

[@НаталияЧамарова]

@@maxgraph иконку закрытия и открытия

[@Alexandr_16kz_22rus]

@@НаталияЧамарова .choices[data-type*=select-one]::after { content: ""; height: 10px; width: 12px; background: url(../img/katalog-praktik/arrow-bottom.svg) center center no-repeat; pointer-events: none; border-style: none; right: 14px; top: calc(50% - 5px); margin: 0; } Только бэкгроунд свой

[@mefioz2397]

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

[@maxgraph]

Псевдоэлемент у choices

[@sostav5]

Здравствуйте! Подскажите, пожалуйста, как скрыть первый элемент в селекте, если id меняется при перезагрузке страницы?

[@maxgraph]

Здравствуйте. Сделать первый опшн с пустым value. Тогда у него будет отдельный от всех класс

[@sostav5]

@@maxgraph всё получилось, спасибо

[@ЕвгенийРусских-г8е]

Мне кажется, что убирать надпись "Press to select" в css немного не правильно. В консоли лишние надписи остаются.

[@maxgraph]

не понял немного, как с этим консоль связана?

[@arsenmanasuev4934]

itemSelectText: 'Press to select', add in js

[@elizaveta7330]

Здравствуйте. Добавила на сайт и заметила такую негативную особенность. Оно открывает и вверх и вниз список. Хотя это не очень удобно. Может есть такое свойство, чтобы раскрывалось только вниз?

[@maxgraph]

Здравствуйте, есть свойство position у плагина, в доке увидите

[@elizaveta7330]

@@maxgraph Спасибо)

[@nekrartgb]

Подскажи пожалуйста, а как добавить его через npm, делаю установку, а как мне подключить стили и js или только через CDN, а то как таковой инструкции нету

[@maxgraph]

В документации смотри, там все пишут)

[@АлексейТишаков]

Обясняете класно , но прокатит только для тех кто в теме

[@netsross9722]

как изменить вид стрелки при открывании и закрывании. Подскажите пожалуйста

[@maxgraph]

Там она псевдоэлементом сделана, его и нужно менять

[@Sasha9433]

Добрый день, а как стилизовать/изменить стрелочку которая показывает открыт элемент или же нет?

[@maxgraph]

Там же див появляется, можете как угодно делать, например псевдоэлементом

[@ВячеславРезников-в3в]

Привет, можешь сделать видос про круговой прогресс бар?

[@maxgraph]

Можно в целом =)

[@Dim_Dimych21]

Нашел в инете плагин селекта Jq Selectic. На русском не одного видео нет. Кто нибудь юзал?

[@maxgraph]

Нет, такой не доводилось

[@user-glory-of-ukraine]

vendor.min.js:1 Uncaught ReferenceError: Choices is not defined почему так? new Choisen() не видит в сборке(через нпм собирал)

[@maxgraph]

Надо смотреть что там за сборка и тд

[@user-glory-of-ukraine]

@@maxgraph спасибо, нашол ошибку!

[@iceRash]

как сделать чтобы выбранный элемент не появлялся в самом селекте ?))

[@maxgraph]

Скрыть его через дисплей можно

[@lidiiastrelets360]

Подскажите пожалуйста, как сбросить селект к исходному состоянию?

[@maxgraph]

это вы о чем?

[@lidiiastrelets360]

@@maxgraph , с этим вопросом я разобралась. Теперь другой: дефолтный селект по нажатию enter инициирует сабмит формы. Этот селект по нажатию enter открывает селект для выбора. Можно ли изменить поведение по клавише ентер, чтобы тоже наступала отправка формы?

[@maxgraph]

Не пробовал. Но скорее всего да)

[@lidiiastrelets360]

@@maxgraph , дайте пожалуйтса хоть направление где искать

[@maxgraph]

События keydown или keyup, обработка keyCode для enter, попробуйте

[@denysmaksymuck]

Что за тема VSC ?

[@maxgraph]

Material

[@nuhler]

Как инициализировать библиотеку, если на странице несколько селекторов? На обращение querySelectorAll не реагирует

[@maxgraph]

Видимо ошибка в коде, должно так работать

[@nuhler]

@@maxgraph спасибо, буду копать