Мне удалось провернуть этот трюк в приложении, над которым я работаю. Допустим, мы хотим иметь платежный модуль. В верхней части формы у нас есть три раскрывающихся списка. Чтобы упростить задачу для пользователя, я хочу, чтобы эти раскрывающиеся списки были зависимыми, поэтому сначала я выбираю здание, затем в другом раскрывающемся списке отображаются только те квартиры, которые действительно принадлежат зданию, и, наконец, после выбора квартиры я смогу выбрать только арендатор, который там живет.
Ключевые моменты:
- Раскрывающиеся списки Flat и Tenant пусты, пока не будет изменено предыдущее раскрывающееся меню.
2. После изменения раскрывающегося списка Building and Flat я хочу получить данные для следующего раскрывающегося списка.
3. Я хочу использовать данные из fetch для заполнения раскрывающихся списков.
Я настраиваю свои массивы в контроллере, чтобы иметь доступ ко всем данным в моем представлении.
Теперь, если я хочу получить какие-либо данные с сервера, мне понадобится конечная точка, которая позволит мне получить доступ к данным в формате JSON, чтобы я мог легко анализировать их и заполнять ими раскрывающиеся списки.
Сначала я создаю записи в файле config/routes.rb.
Это будет отражать мои действия в контроллерах:
Теперь, когда у меня есть настройка бэкэнда, я могу приступить к фронту.
Здесь у меня есть раскрывающиеся списки, которые мне нужно заполнить динамически.
На момент написания этого поста Rails 7 уже был выпущен, но я уже запустил свое приложение в версии 6.1.4 и смог немного понять webpacker, поэтому решил придерживаться его. Мой JS-код находится внутри папки javascript. приложение/javascript/forms/fetch_building_data.js
Кроме того, я добавил оператор require в application.js.
require(‘forms/fetch_building_data’)
Здесь я загружаю свои переменные, как только turbolinks:load завершается. Это правильный способ добавления этого обработчика, потому что если вы попытаетесь добавить DOMContentLoaded или load, это не сработает. Рельсовый путь🛤.
Поскольку я также использую этот скрипт в представлении арендаторов, используемом для создания только двух раскрывающихся списков (для здания и квартиры), я объединил этот код в один файл. Теперь, прежде всего, я установил длину зависимых тегов select на 1, таким образом, только мой заполнитель будет доступен, пока вы действительно что-то не выберете. Остальная часть функции позаботится о сборе ввода из раскрывающегося списка.
buildingSelect.addEventListener(‘input’, function (event)
и хранить его
let buildingId = event.target.value
Функции внизу создают параметры для моего выбора и добавляют их.
Вот и все.
