{"draftJsState":{"blocks":[{"data":{"image":{"id":"683bf59995eee80f6c68c76a"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"b56mm"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"4vspi"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Вот вам реально полезный материал по созданию выпадающих списков — такой, какой я сам искал, когда только начинал работать с формами.","type":"unstyled","key":"49voo"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Базовый вариант (минимум кода)","type":"header-two","key":"44k7f"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"\uD83D\uDC49 ``","type":"unstyled","key":"3h04h"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Работает сразу, ничего дополнительного не нужно.","type":"unstyled","key":"3kj99"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Продвинутая версия (для реальных проектов)","type":"header-two","key":"a0tm1"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"\uD83D\uDC49 `Ваш город:\n`","type":"unstyled","key":"9uuep"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Что мы улучшили:","type":"unstyled","key":"4rid0"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Добавили label для доступности","type":"ordered-list-item","key":"durru"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Указали name для обработки формы","type":"ordered-list-item","key":"agdl4"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Сделали обязательный выбор (required)","type":"ordered-list-item","key":"2a6ci"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Использовали value для отправки на сервер","type":"ordered-list-item","key":"6bosh"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Группировка вариантов","type":"header-two","key":"94g47"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Когда нужно сгруппировать пункты:","type":"unstyled","key":"e2fao"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"\uD83D\uDC49 ``","type":"unstyled","key":"9ibef"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Множественный выбор","type":"header-two","key":"fiq8d"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Если нужно выбрать несколько вариантов:","type":"unstyled","key":"etbth"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"\uD83D\uDC49 ``","type":"unstyled","key":"ep3tm"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Удерживайте Ctrl (Cmd на Mac) для выбора нескольких пунктов.","type":"unstyled","key":"8d7r8"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Стилизация через CSS","type":"header-two","key":"4cpj0"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Базовые стили для улучшения вида:","type":"unstyled","key":"1h29d"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"\uD83D\uDC49 ","type":"unstyled","key":"9g9lf"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Частые проблемы и решения","type":"header-two","key":"faekc"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":20,"offset":0,"style":"BOLD"}],"text":"Не работает required\nПроверьте, что у первого option есть disabled и selected","type":"ordered-list-item","key":"2u9vi"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":27,"offset":0,"style":"BOLD"}],"text":"Плохо выглядит на мобильных\nДобавьте в head:\n\uD83D\uDC49 ","type":"ordered-list-item","key":"amcus"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":24,"offset":0,"style":"BOLD"}],"text":"Нужен поиск по вариантам\nИспользуйте JavaScript-библиотеки типа Select2","type":"ordered-list-item","key":"97ked"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Работа с данными","type":"header-two","key":"digpj"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Получение выбранного значения на JavaScript:\n\uD83D\uDC49 document.querySelector('select').value","type":"ordered-list-item","key":"po9k"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Установка выбранного значения:\n\uD83D\uDC49 document.querySelector('select').value = 'msk'","type":"ordered-list-item","key":"33v1t"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Альтернативы","type":"header-two","key":"42bsu"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Для сложных случаев рассмотрите:","type":"unstyled","key":"abql3"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Библиотеки (Select2, Choices.js)","type":"unordered-list-item","key":"8af1c"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Кастомные решения на div'ах","type":"unordered-list-item","key":"939k9"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Компоненты UI-фреймворков (Bootstrap, Material UI)","type":"unordered-list-item","key":"at6pp"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Важные нюансы","type":"header-two","key":"7ak50"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Всегда используйте label — это важно для доступности","type":"ordered-list-item","key":"1br7v"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Для обязательного выбора — required","type":"ordered-list-item","key":"14ft0"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Указывайте значения в value, а не только текст","type":"ordered-list-item","key":"dfga9"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Тестируйте на мобильных устройствах","type":"ordered-list-item","key":"2neir"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Попробуйте создать свой список прямо сейчас — это лучший способ запомнить синтаксис. Если возникнут вопросы — пишите в комментарии, разберём конкретные случаи.","type":"unstyled","key":"aihtg"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"marker","key":"zKuH3P7HoWEeaKyfs9H5"}],"entityMap":{}},"mentions":[]}