Как сделать форму выбора(марка автомобиля,модель итд) как на сайте drom.ru(описание внутри)?

Question

[Nik_1011]

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

Хочу сделать форму для выбора (автомобиль,модель,год,ваше сообщение) и последующей отправки этих данных. До этого делал простые формы отправки(ваше имя,ваш телефон), используя selectize.js.

Сайт - drom.ru
Форма - prnt.sc/sk1oh7

Вопросы:

1)Есть ли какие-либо библиотеки или плагины, позволяющие создать подобное, потому что велосипед изобретать считаю нерациональной затеей, но если надо все самому делать, то готов и вручную сделать.Может что-то посмотреть,чтобы подчерпнуть для себя нужные знания.

2)Как лучше заполнять данные select: вписывать каждый option и задавать ему id,value и описание или через конструктор Object?Еще вариант

3)Какие способы имеются,чтобы связать марку автомобиля и модель, то есть чтобы не все подряд высвечивалось(например, марка Toyota - модели Land Cruiser,Camry,Crown; марка Mercedes - модели E-class,C-class,S-class)?

Answer 1

[Арсений Матыцин]

1. Есть JS-фрейморки, которые упрощают жизни в постройке такого, например Vue (в проекте же может быть использован React или Angular).
2. Форма должна иметь id (value) для БД и значение для пользователя (внутри тега option), для адекватного обмена данными и записи связей в БД. В референсе, кстати, эмуляция динамическая, сам selet со значениями скрыт.
3. На уровне данных для JS → объект, на уровне БД → связи один ко многим.

Кстати, так как марки автомобилей заранее известны, то это можно даже не заносить в базу, а хранить просто в объекте в конфигах, но по правде говоря вариант так себе, в базе проще объявления вязать по ID с марками.

Comments

[Nik_1011]

Спасибо за ваш ответ.

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

Angular,React,Vue я еще не изучал,это интересно,но пока в плане задач. С БД я связывать это не планировал, то есть это обычная форма, где оператору должно прийти сообщение наподобие "марка,модель,год, запчасть в поле textarea,имя,телефон",а есть ли запчасть в наличии или нет это клиент узнает у оператора.

На основе сказанного,что если я сделаю эту форму на основе данного примера,без использования объекта JS,а также,как и в примере впишу данные и id в option "вручную", будет ли это правильно?

В референсе, кстати, эмуляция динамическая, сам selet со значениями скрыт

- скажите,пожалуйста,что подразумевается под этим? Select же при первичном открытии отображает значение "make","model" итд.

[Арсений Матыцин]

Nik_1011, да, такой подход на классах будет работать, но чтобы эту форму получить ее надо отрисовать, что сводит все равно к объектам, на уровне бэка или морды.

Референс. В нем открой код через дебаггер (f12) и может быть, все станет понятно.

Answer 2

[Пашенька]

1. Именно потому что вы используете какие-то библиотеки, считаете написание подобной формы велосипедом и прочие глупые мысли, вы и оказываетесь на данном ресурсе в качестве вопрошающего.
2. Генерировать JavaScript'ом из данных, о которых речь в следующем пункте.
3. JSON. Формируете массив ДжаваСкрипт объектов аля:

[
    {
        "Mercedes": {
            "E-class": {
                "тут уж": "на что фантазии хватит"
            },
            "C-class": {
                "тут уж": "на что фантазии хватит"
            },
            "S-class": {
                "тут уж": "на что фантазии хватит"
            },
        }
    },
    {
        "Porsche": {
            "911": {
                "тут уж": "на что фантазии хватит"
            },
            "928": {
                "тут уж": "на что фантазии хватит"
            },
            "944": {
                "тут уж": "на что фантазии хватит"
            },
        }
    }
]

И генерируете на его основании форму. Над структурой нужно подумать хорошенько, чтобы с годом не было больно потом. Можно как с бекенда получать данные, так и иметь на фронте все данные, решать задачу можно сколь угодно вариативно в зависимости от нюансов. It's up to you.

Answer 3

[Константин Б.]

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

Comments

[Nik_1011]

Спасибо за разъяснение,особенно про React,давно интересовался данной библиотекой.Сейчас понял насколько она полезна.

Цель - prnt.sc/sk4564

[Константин Б.]

Nik_1011, это не цель. это просто форма. Цель - это то для чего она используется