Тотальное руководство по select в JavaScript и HTML. Закрываем гештальт фронтенд разработчика

Подписаться 140 тыс.

Просмотров 17 тыс.

50% 1

🔶 itgid.info
✈️ Телеграм: t.me/itgid_info
👨‍💻 Скачать код: itgid.info/ru/post/total-inst...
👨‍🎓 Курсы:
HTML : itgid.info/ru/course/html
JavaScript: itgid.info/ru/course/js20
ReactJS: itgid.info/ru/course/reactjs
PHP: itgid.info/ru/course/php
Интернет магазин: itgid.info/ru/course/nodeshop
Канал ru: / itgid
Канал UA: / @itgidua-web7836
Select - элемент без которого нельзя представить современный сайт. Изучаем все, что необходимо фронтенд разработчику при работе с select. Учимся получать value, получать индекс выбранного option, получать коллекцию option и select. Учимся задавать активный option при загрузке и делать активный и неактивный выбор в select.
Работаем с атрибутами selected, default, hidden. Учимся управлять порядком отображения option внутри select. Создаем select на основе объекта и массива. Управляем порядком элементов через массив, объект.
00:00 Начало
00:30 Начальная верстка
02:20 Получаем value и оптимизация кода
06:10 Получаем индекс и текст активного option
11:50 Активный option при загрузке страницы
17:00 Атрибут disabled, selected, hidden
20:50 Создаем select через объект
26:40 Создаем select через массив
30:40 Задание selected option в массиве
Моя рабочая станция:
Desktop: AMD Ryzen5 1600,Asus GeForce GTX 1650 Phoenix 4GB GDDR6, RAM: 32GB, Motheboard: MSI A320M PRO-M2 V2, Power: Chieftec Value APB-400B8 400W Bulk, Box: Gougar MX350 Mesh
HDD:
- Samsung 860 Evo-Series 500GB M.2
- Toshiba P300 2TB
- Silicon Power A56 256GB
Monitors:
- 23.8" Dell P2419HC
- 23.8" Dell P2418D
Mouse: Trust Verto Ergonomic Wireless
Keyboard: HP KU-1469
Microphone: Samson C01U Pro
+ IBM Lenovo ThinkPad E14 / Intel Core i5-1135G7 (4.2 ГГц) / RAM 16 ГБ / SSD 1 ТБ / Intel Iris Xe Graphics

Опубликовано:

13 май 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 71

@user-zj1nn8zj8f Год назад

Спасибо, как всегда классные и нужные видосы 👍

@MrKOHKyPEHT Год назад

Это база! Освоив работу с данными и DOM элементами - покорить фреймворк это дело техники )

@itgid Год назад

Не знаю. Вначале фреймворки вызывают боль. А потом ты не понимаешь - как писал без них.

@user-ug1zv4tf1m Год назад

@@itgid у меня все наооборот , я начал с фреймворка что считаю не правильно , это касательно Laravel , а теперь решил все сдалть на чистом php.... я страдаю

@ig89 Год назад

Вы большой молодец ☝

@jinke5935 Год назад

Как бальзам на душу) Из курса "JS 2.0" помню задачки с применением select.

@Indy_660 Год назад

Спасибо большое. Сам мидл, но с такими азами как-то не сталкивался)

@sergmalin210 Год назад

Очень хороший урок как всегда. Еще создать новую опцию можно через new Option. let newOption = new Option(text, value, defaultSelected, selected);

@user-ff3lc1et3u Год назад

Отличный туториал, то, что надо в реальной практике

@araragi6407 Год назад

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

@user-ff3lc1et3u Год назад

@@araragi6407 как это не используют? Он нужен практически на каждом сайте. Мы генерировали его из js по приходящим данным. Есть еще похожее dataset. Когда делали fullCalendar, select очень даже нужен был для отображения данных в to do листе

@itgid Год назад

Вы правы, такое направление есть - когда сами делаем выпадающий список. Но это если мы говорим о сайтах, с которыми работает пользователь. А в админках - только в путь без сложных стилизаций. Там не до красивостей.

@araragi6407 Год назад

@@itgid Вы правы. Про админки я и позабыл))

@ertar0 Год назад

спасибо!

@bomzhiha-s-kurskogo-vokzala Год назад

Сложный элемент. Недавно на проекте надо было реализовать кастомный, с поиском, сбросом значения, с динамически изменяющимися списками опций и плейсхолдерами, времени заняло просто уйму. Спасибо за урок, было что подчерпнуть, нравится ваш стиль объяснения!

@user-nf5yc7xz9b Год назад

Приветствую Александр , благодарю вас за ваши видео , за подачу , за объяснения , за то. Что вы украинец как и я))) такой вопрос , вы делали как то колесо как в париматч , и очень круто объяснили логику , но вот какой вопрос , могли бы вы сделать или хотябы объяснить логику как сделать бегающие ряды , как в игровых автоматах , было бы очень интересно и наверное не мне одному

@adelony Год назад

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

@itgid Год назад

Не совсем понимаю вы имеете ввиду структуру данных, либо последовательный выбор в нескольких select?

@adelony Год назад

@@itgid Последовательный выбор, например, в одном списке - марки машины, а во втором - модели. Соответственно, когда выбираешь, например, Audi, то во втором списке выводятся связанные с маркой модели: A3, A4, A5 и т.д.

@VIJana79 Год назад

@@adelony вы имеете ввиду фильтрацию элементов?

@felxxx4753 Год назад

Видио снова оказалось пользным

@gregdmitriev2784 Год назад

good 👍👍

@user-wl7qy6xl6s Год назад

Ей богу недавно возился с селектом.. бесячий блок... Спасибо за внесение ясности

@lisofsky8151 Год назад

вот это я понимаю железо ))) !!! класс Моя рабочая станция: Desktop: AMD Ryzen5 1600,Asus GeForce GTX 1650 Phoenix 4GB GDDR6, RAM: 32GB, Motheboard: MSI A320M PRO-M2 V2, Power: Chieftec Value APB-400B8 400W Bulk, Box: Gougar MX350 Mesh HDD: - Samsung 860 Evo-Series 500GB M.2 - Toshiba P300 2TB - Silicon Power A56 256GB

@user-wv9vk8io1y Год назад

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

@itgid Год назад

Одним из базовых свойств гештальта является стремление к его завершенности. «Закрыть гештальт» - это значит, до конца с чем-то разобраться и поставить точку подсознанию в том или ином вопросе.

@jamjam3337 Год назад

👏👍

@voinwot9715 Год назад

Здравствуйте!

@odnorob 6 месяцев назад

Спасибо. Еще непомешало бы узнать как установить нужный option в состояние selected, когда у нас есть текст. Например есть текст Prague и нужно установить именно на это значение. То есть не по индексу а по тексту.

@flowcsgo804 3 месяца назад

.textcontent Ну и chatgpt в помощь)

@vladimerfisher4442 Год назад

А как вставить и вывести иконки или изображения в select???

@radzh2023 Год назад

👍

@MrUnknownman1986 Год назад

Скажите пожалуйста, что вы думаете о ChatGPT ? Нужно ваше мнение. Заменит ли он в будущем программистов ? Стоит ли начинать изучать программирование ? Что посоветуете джунам или тем, кто только начинает изучать программирование ? Через 5, через 10, а может через 1,5-2 года что будет с программистами ?

@itgid Год назад

С программистами ничего не будет. Формошлепы станут работать быстрее. Учиться нужно, ведь чтобы GPT написал что-то отличающееся от крестиков ноликов - придется очень точно описывать алгоритм. А для этого нужно понимать алгоритм. Те по сути происходит автоматизация набора кода. Такое уже было когда ушли пробивальщики перфокарт, машинисты операционщики и тд. Учитесь. А чат станет помощником, который позволит работать быстрее.

@konstantinkkk8397 Год назад

Снимите пожалуйста видео про async и defer аттрибуты в скрипт теге. и варианты подключения script в разных местах html c разными аттрибутами, потому что лучше чем вы объясняете никто не объяснит

@EoLienFive Год назад

Не плохо было бы продемонстрировать как заполнять input type="text" на основе options. И затем выводить данные в таблицу по клику.

@itgid Год назад

Не совсем понял, что вы имеете ввиду?

@EoLienFive Год назад

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

@Zzaharich Год назад

Будьласка наступного разу якщо у вас VScode з темною темою, зробіть і браузер темним, або навпаки, бо контраст дуже сильний. Дякую за відео і уроки.

@itgid Год назад

Дякую. Зроблю.

@AleksTrifonov Год назад

Как удалить все options из select?

@ArabicLang.online Год назад

Александр, очень радостно вновь слышать Вас! Скорейшей победы и успехов!

@sergeypetrovetsky3431 Год назад

Я вот работал недавно, и решил для расчетов калькулятор сделать где нужен select, инфы не нашел, и забил))

@TheEmotionVideo Год назад

гештальт наверное правильное слово, а не гельштат)

@itgid Год назад

Да, что поделаешь, на уроках гуманитарных я читал гарри поттера.

@user-jc7if6bc4o Год назад

Гефешт

@xxxxrat Год назад

hidden = [хидн], не хайдн.

@user-nf5uj8um6m Год назад

а почему ссылка на курсы по js не работает из того что я в России?

@itgid Год назад

Данный вопрос лучше задать провайдерам в рф - почему блокируюют

@ob5804 Год назад

1. в 4 блоці я робила зміни, от select прописала такі зміни - select4.append(option); select4.style.width = '100px'; select4.style.borderColor = 'red'; select4.style.borderRadius = '20px'; select4.style.backgroundColor = 'black'; select4.style.color = 'blue'; select4.style.padding = '5px 10px'; - все працює, а от option - не все змінилось option.style.backgroundColor = 'red'; option.style.color = 'white'; option.style.width = '100px'; // нема зміни option.style.borderRadius = '20px'; // нема зміни option.style.borderColor = 'orange'; // нема зміни - чому так?? 2. Чи правильно писати в html тільки один такий рядок , щоб зробити кастомний селект, чи повинна бути структура select+options? Як треба? 3. А як дістатись до стрілочки, чи змінити, чи здвинути?? 4. Якщо створюємо через js селект, то options до кінця переробити на свій лад ми не зможемо?! Хочеться, щоб і з клавіатури можна було користуватись селектом і щоб можна було стилізувати, як мені треба. Коли ж створюємо селект +option, то з клавіатури, все ок( це я міркую), але стилізування option не до кінця(, а якщо прописати створення div , будуть стилі, але з клавіатури корист. не вийде, колись намагалась таке зробити, нормально не вдалось зробити. Будь ласка, допоможіть розібратись) Аа ще...Якщо все-таки зробила select+options, змінити hover на option реально, якщо так, як це робиться??Я з ним і так і сяк, не робиться( В мене ще є питання, але думаю. що на сьогодні досить) Просто розібратись хочу.

@MrKOHKyPEHT Год назад

19:21 - в голове заиграла музыка из Mortal Kombat (ютуб подсвечивает мне слово Kombat, не зная что в названии фильма использовалось именно слово через K)

@itgid Год назад

Таки есть

@andrewmosh7274 Год назад

Гельштат это новое понятие в фронтенд разработке? или может вы имеете в виду гештальт?

@itgid Год назад

Да, что зделаешь, в языках я профан.

@andrewmosh7274 Год назад

@@itgid главное, что в языках программирования спец!

@whiteguards43 Год назад

Такое скучное начло.. Музыка так и просит выключить чтобы не заснуть, пожалуйста не ставь ее...

@piligr1m_ua_ Год назад

Дивився до повномасштабної...наразі відпишусь, не сприймаю рососіянську

@MrKOHKyPEHT Год назад

Спеціально для тебе є канал на українській. ItGidUA в пошуку ютуб

@piligr1m_ua_ Год назад

@@kandreyk9159 вологі мрії рососіянця 🤦 всесвітні ізгої

@adelony Год назад

В путь-дорогу, шовинистическая свинка

@adelony Год назад

@@user-kn8nl4lv5y Ну да, государственный переворот, не лежит в сфере интересов элиты страны, это все народ решает... Только удивительно, власть в стране меняется, а список самых богатых людей - нет. А вообще, это дело народа Украины, просто многие украинцы говорят: "Если бы русские были против войны, то пошли с автоматами на Кремль", я не понимаю, насколько глупым надо быть, чтобы верить, что народ что-то может сделать против силового аппарата, и без протекции вышеупомянутых элит...

@itgid Год назад

Таке собі. Можливо краще перейти по посиланню під відео на український канал?

@tempest7772 Год назад

Александр, почему на ваш сайт не зайти? с разных устройств пробовал и ничего

@relaxing_person Год назад

через ВПН попробуйте

@user-zv6gp9vc8f Год назад

Гештальт... очепятка😊 Но ничего страшного

@itgid Год назад

Увы. Как оказывается не все ошибки может нейросеть заметить :) Поскольку обучалась на материалах в нете. Нужно иногда и просто проверкой ворда пользоваться. Спасибо.

@konstantinkkk8397 Год назад