Кастомный выпадающий список Choices
HTML-код
- Опубликовано: 28 ноя 2022
- Делаем кастомный select - выпадающий c помощью библиотеки Choices.js без знаний javascript. HTML+CSS+JS
Choices: github.com/Choices-js/Choices
👁🗨 Телеграм: t.me/frontend_du2
👁🗨 Discord сервер: / discord
👁🗨 VK: frontend_du2
👁🗨 Дзен: dzen.ru/frontend_it
![Dimension 20: Never Stop Blowing Up Trailer [Dropout Exclusive Series]](http://i.ytimg.com/vi/xYeXpbHnGEM/mqdefault.jpg)
Александр,спасибо большое,вы очень круто объясняете,я три часа возился с кастомизацией selecta,а посмотрев ваш ролик сделал за 15 минут.Класс.
Пятый раз обращаюсь к твоему видео. Нереально выручаешь, спасибо большое!
Это самое приятное в моей деятельности )) то, что видео правда помогают. спасибо, что пишите об этом.
Александр, благодарю. Очень помогло Ваше видео, всё понятно и доходчиво, хорошая подача материала.
Спасибо за ваш комментарий. Очень приятно, но подачу буду улучшать )) Стремлюсь делать видео лучше :)
Александр, спасибо! Проделала сейчас вместе Вами и вспомнила хорошо забытую работу), скучаю по верстке )))
Спасибо за просмотр и комментарий. Да, я наконец решил записать это видео. Чувствовал, что по этой теме есть много вопросов )
Спасибо, Александр, вы как всегда неподражаем 👍
:) Очень приятный комментарий и поддержку ) Буду стараться в том же духе и лучше
@@alex_dudukalo ждем новых видео
Спасибо за подробное и понятное видео)) интересно Вы схитрили со стрелочкой
Спасибо вам. Да, работа с библиотеками вынуждает прибегать к хитростям ))
Спасибо!! Много раз пользовался этим плагин, но как всегда узнаю у вас что-то новое. 👍
Спасибо за ваш комментарий. Рад, что нашлась новая и интересная информация для вас. Буду продолжать :)
Кстатомная механическая клавиатура, у программистов бывают приколы в этом😅
Спасибо, Александр за новый ролик!
))) Да да. Спасибо вам за ваш комментарий и поддержку ) Буду работать над роликами дальше :)
Спасибо большое за видео и понятное объяснение!
Спасибо вам )
Спасибо за полезную информацию))) очень информативное видео))))
Благодарен вам за ваш комментарий :)
Александр как всегда все понятно и круто. Я бы еще знаете что добавил. Чтобы при выборе города он исчезал из списка(дропдауна), а при выборе другого появлялся опять, а тот который выбрали исчезал и так далее. Считаю это важным, потому что при использовании в проектах это точно понадобится🤝🤝🤝
Спасибо за ваш комментарий :) Да, сейчас он остается в списке, и имеет класс is-selected. Пожалуй, если буду записывать ролики с Choices, упомяну об этом. А пока это можно сделать, добавив в css такие строчки:
.choices__item.is-selected {
display: none;
}
@@alex_dudukalo я знаю) сталкивался на курсе! Это для тех кто совсем сначала все👍🤝
@@asgard1428 да, может кому то будет полезно, если прочитает комментарий
вчера 6 часов мучался :) спасибо за контент!!! теперь справлюсь
Да, когда первый раз делал стилизацию селекта, тоже кучу времени потратил :) Вообще не самый приятный элемент для стилизации. Ну отработать его нужно
Александр спасибо!
Спасибо за ваш отклик :)
видео супер, скину в группы по теме, спасибо!
Большое спасибо. Это мне поможет продвигать канал )) Репосты - это круто
Александр, спасибо за видео. А как можно сделать 2 selecta с разными стилями с помощью choices? Я задал им разные классы, соответственно стили choices для второго select не работают(классы я переназвала в настройках). Эти стили нужно будет руками добавлять в новые классы для второго select? Или есть способ более удобной реализации?
Всё круто! Спасибо!!!
Спасибо вам :)
Спасибо за видео. Такой вопрос: при открытии селекта в девтулс открываются доп классы, но не могу их исследовать, так как они исчезают, когда нажимаю за пределы списка. Как посмотреть все имеющиеся скрытые классы? Как сделать, чтобы они не исчезали?
Контент достойный, недавно нашел, посмотрел, заценил, подписался)
Спасибо за такой комментарий😊 Рад, что мой курс Вам полезен
Да уж, я помню, сколько я в свое время потратил сил на работу с этим плагином)))))
Да да, не самый приятный элемент для стилизации. Я, когда столкнулся с ним тоже потратил время, что бы разобраться ) Пару раз стилизовал и разобрался )
Топ. Спасибо, Александр
Спасибо вам. Я рад, что видео вам понравилось :)
Просто спас. Спасибо!
Всегда приятно получать комментарии о полезности ролика :)
Видео крутое спасибо 😍)) не подскажешь как тоже самое провернуть на несколько селектов сразу, стилизовать их по разному, в частности мне нужно добавить разный фоновый рисунок на каждый селект выбора
Кажется вы имеете ввиду итоговую работу сайта художников. То место, где верхнее меню ? :) Там не будет селекторов. Там блоки, которые появляются при клике. Я прикрепляю видео с разбором. А прокрутка делается с помощью Simplebar ruclips.net/video/154WXCMr9g4/видео.html
Спасибо, большое за ответ )) благодарен , я к такому варианту и пришел в итоге )) но за видио большое , огромное спасибо
спасибо!
Подскажи, если вложенные списки 3й вложенности можно стилизовать этой библиотекой? Мне нужно стилизовать li вложенные в несколько разных ul.
Спасибо вам. Сложно сказать, поддерживает ли библиотека древовидные структуры, но группировку опшинов по категориям точно можно сделать
Круто как всегда)
Если вдруг кому-то понадобится сделать несколько костомных select то делайте через цикл, по другому не работает.
Вот пример, может кому поможет:
const element = document.querySelectorAll('select');
element.forEach(el() => {
const choices = new Choices(el);
})
Спасибо за ваш комментарий ) И полезную подсказку. Дума, многим будет полезно. Только замечу, что .select - это класс. Если вы нужно все select сделать по тегу, то пишем без точки. (Пометка для зрителей) :)
@@alex_dudukalo благодарю) косяк поправил)
Здравствуйте, а есть информация как стилизовать каждый option по оттдельности? Стилизовал через data-value, но при выборе в селекторе данного элемента, его бэкграунд остается! помогите!!!
В видео ещё бы добавить настройку анимации, так как оказалось, что некоторые моменты совсем нетравиальные в данной библиотеке. И я так пока что не разобрался, как сделать так, чтобы скрытие списка происходил плавно, когда закрываешь список (то есть список у меня открывается плавно, а вот закрытие происходит не плавно🤷)
Я думаю можно было бы сделать более расширенный ролик по выдающему списку. В этом видео я скорее показал основу подключения. Думаю много еще чего можно показать :)
Спасибо)
Спасибо 👍
И вам :)
Спасибо два дня бился) 👍
Надеюсь ролик вам помог :)
Александр, спасибо за видео, оно очень меня выручило.
Вопрос: а как сделать так, чтобы пункты в селекте были расположены не по алфавиту, а как написано в разметке?
Спасибо вам . Вот так:
const choices = new Choices(element, {
searchEnabled : false,
itemSelectText: "",
shouldSort:false
})
shouldSort -свойство для сортировки
@@alex_dudukalo спасибо, сейчас буду пробовать! Пожалуйста, продолжайте вести этот канал 💖
А с чего начать просмотр на вашем канале, если хочется понять работу js (я тотальный новичок)? С классов?
.is-open .choices__list .choices__item:hover { background-color: red; }
Вот так меняю фон элемента списка, который в данный момент под курсором мыши. Как так же менять бэкграунд выбранного элемента списка, только если перемещаться по списку с клавиатуры. Простая замена hover на focus не работает...
Александр, одного спасибо будет мало, но серавно спасибо, есть ли у вас свои курсы по js? С радостью у вас приобрёл бы)
Спасибо вам :) Очень очень приятно. Думаю, что скоро что то такое сделаю. Только нужно составить план. Но я думаю от этом уже давно :)
Здравствуйте Александр , такой вопрос как сделать фокус и актив для элементов селекта , у меня получается так что фокус вообще не работает , так как селект с таба не открывается, а если его открыть с мыши и нажать таб то он закрывается , ну и актив совсем не видно , потому что селект сразу закрывается при нажатии на любой элемент выподающиго списка , объяснил как мог ) надеюсь получится разобраться с вашей помощью
Здравствуйте, надеюсь вопрос актуален , и надеюсь его понял. Если вы хотите управлять select c клавиатуры и выбирать нужный элемент, то вам нужно нажимать стрелку вверх и вниз на клавиатуре, таб работать для выбора пунктов выпадающего списка не будет ) Просто стрелки нажимаются и все :) Если вы хотите задавать стилизацию выделенного элемента, то используйте класс .is-highlighted
@@alex_dudukalo получается я не к тому классу обращался ) спасибо вам за ответ
Придумал продолжение ролика по choice. Можно сделать форму, в которой в зависимости от текста или "типа" choice менялся бы тип инпута и тем самым например не давал вписывать в инпут цифры и ТД.
Довольно типовая задача :) Думаю можно будет сделать подобный контент :) Спасибо, за предложение. Сделаем))
да делай дальше у тебя дар простой подачи информацыи)
Благодарю вас за такой комментарий :) Буду продолжать и улучшать подачу ))
Напишите пожалуйста как сделать, чтобы кастомный список подключался в каждой карточке, а не только в первой. Понятно, что надо использовать querySelectorALL вместо querySelector, ну а дальше? С JS я пока не дружу(
Можно попробовать так
document.querySelectorAll('select').forEach(select=>{
new Choices(select);
})
Спасибо! Вот в таком виде у меня получилось:
const element = document.querySelectorAll(".js-choice").forEach(element => {
const choices = new Choices(element, {
searchEnabled: false,
itemSelectText: ""
})
})
Работает)
Материал почему нужно пустое value=" " , когда скрываем choices__placeholder ?
Да, именно :) Это указывает на то, что этот option будет плейсхолдером селекта :)
Выпадене списка вверх вы к сожалению не осветили. Сам додумался до такого:
Стилизация выпадания вниз: .is-open .choices__list[aria-expanded] { ... }
Стилизация выпадания вверх: .is-flipped.is-open .choices__list[aria-expanded] { ... }
Правильно я делаю?
Здравствуйте, да забыл показать этот момент. Когда селект находится ниже центра экрана (окна браузера) селект выпадает вверх. Это происходит за счет добавление класса элементу ) Вы все верно поняли
А если у меня несколько селектов на страницы, то как сделать? Пишу const element = document.querySelectorAll('.js-choice'); , но не работает
const element = document.querySelectorAll('.js-choice');
element.forEach((el) => {
сюда вставляете код
})