Когда я работал над своим проектом JavaScript + Rails, мне нужно было сделать правильно работающую форму с 3 входными данными (имя, путь к изображению, детали) и 1 полем выбора. И сегодня я остановлюсь на последнем.
В моем случае взаимосвязь следующая: в штате много достопримечательностей (= интересных мест), а достопримечательности принадлежат штату, поэтому при создании новой достопримечательности мне понадобился блок выбора, содержащий список всех 50 американских штатов.
Вот окончательный результат, и если вы продолжите читать, я поделюсь кодом, который покажет вам, как реализовать эту функциональность.
Теперь это начало формы в index.js.
Проблема, с которой я столкнулся, заключалась в том, как добавить все 50 состояний, чтобы при создании нового прицела я мог выбрать состояние, и это создало бы связь между прицелом и состоянием. Обратите внимание, что состояния расположены в алфавитном порядке, чтобы не создавать путаницы, и когда вы отображаете состояния на странице, они также располагаются в алфавитном порядке.
Вернемся к штатам. Я создал массив состояний (в алфавитном порядке, не забывайте) — это было не так сложно — я просто нашел список состояний в Интернете и поставил каждое из них в кавычки.
После этого я использовал .forEach и добавил 2 параметра, где st = каждое состояние и i = индекс каждого состояния. Я перебирал массив, назначая каждой опции текст, класс и значение. Последним шагом здесь было добавить все параметры в поле выбора.
Последняя часть формы — это объединение всех частей воедино — я просто добавил к ней все элементы формы, а затем добавил эту форму к div с id="new_form" в index.html.
Что дальше? Создавать прицел, конечно! Это вторая функция:
Это вторая функция (по крайней мере, первая ее часть) — здесь я выбрал форму, которую создал, добавил к ней прослушиватель событий и сделал несколько переменных, которые будут принимать ввод от пользователя:
Сейчас настало время! Я указал URL со списком прицелов (именно туда я собираюсь отправить свой только что созданный прицел), метод, заголовки и тело выборки.
Возьмите ответ и преобразуйте его в json, затем создайте новый прицел из ответа. После этого я очистил форму и прокрутил до нижнего колонтитула — я сделал это, чтобы привести пользователя к только что созданному сайту.
Вам может быть интересно, как сделать этот свиток. Ну а вот функция — я ее действительно где-то нашел в интернете. Если вам интересно узнать об этом больше, попробуйте погуглить «offsetParent» и «offsetTop».
И вуаля! У меня есть хорошая рабочая форма с полем выбора.
