- Створена HTML-форму, в якій можна вибрати виробника автомобіля і марку автомобілів обраного виробника.
- Дані в списку моделей автомобілів повинні бути унікальні для кожного виробника.
- Сторінка не повинна перезавантажуватися після вибору виробника.
Завдання зрозуміле. Що ми можемо додати від себе? Якщо обраний виробник змінюється, значить з переліку моделей потрібно видалити все те, що мало відношення до попереднього виробнику. Якщо виробник не обраний, поле вибору моделі повинно бути порожнім. А краще зробити його ще і неактивним.
Почати потрібно з таблиць в MySQL. Для того, щоб вирішити задачу, потрібно створити дві таблиці в базі даних: producers (виробники) і models (моделі).
Тепер поповнимо таблиці даними.
Щоб підключатися до нашої бази даних ми будемо використовувати вже знайомий вам сценарій підключення до СУБД.
Тепер можна створити HTML-форму. Відразу скажу, що тут у нас будуть працювати в зв'язці PHP, MySQL і jQuery. Саме за допомогою jQuery select з переліком моделей автомобілів буде отримувати дані з бази даних (динамічні списки, так би мовити).
Тепер нашій формі потрібно надати якийсь простенький зовнішній вигляд. Для цього ми створимо дуже невеликий CSS-файл зі стилями.
Після цього наша форма буде виглядати приблизно ось так:
Саме в цьому файлі написаний обробник події вибору виробника, після якого створюється AJAX-запит до веб-сервера, здатний повернути у відповідь перелік моделей автомобіля обраного виробника.
От і все. Завдання вирішена. Можна вибрати виробника.
Після цього можна вибрати модель автомобіля.
Можна змінити виробника. Тоді вміст списку моделей очиститься і оновиться новим переліком.
А можна взагалі нічого не вибрати серед виробників. Тоді список моделей скинеться, а потім відключиться.
Всі файли, згадані в статті, я помістив в архів.