Тебе нужно
повесить событие изменения (
change) на
select, затем отправить
AJAX к серверному скрипту который вернёт
JSON список дочерних категорий для только что выбранной категории.
Пример для JQuery:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
</head>
<body>
<!-- Select родительских категорий -->
<select name="categoryfilter">
<option disabled="disabled" selected value="">Выберите категорию</option>
<option value="1">Категория 1</option>
<option value="2">Категория 2</option>
</select>
<!-- Select дочерних категорий -->
<select name="subcategories"></select>
<!-- Подключение JQuery для примера -->
<script
src="https://code.jquery.com/jquery-3.6.0.min.js"
integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
crossorigin="anonymous"></script>
<!-- Логика клиентской части -->
<script type="text/javascript">
// Вешаем событие изменения на селект категорий
$('select[name="categoryfilter"]').on('change', function(){
let val = $(this).val(); // value только что выбранной категории
$('select[name="categoryfilter"]').html(''); // Очищаем фильтр дочерних категорий
//Запрашиваем данные
$.ajax({
url: '/path/to/file', // Путь к файлу PHP от корня сайта
type: 'POST', // Отправляем данные методом POST
dataType: 'json', // Ждём что сервер вернёт JSON
data: {
category: val, // Отправляем переменную 'category' со значением 'val'
},
})
.done(function(data) {
// Когда сервер вернул JSON
// Перебираем данные циклом
$.each(data, function(index, item) {
// Добавляем внутрь select'а дочерних категорий новые опции
$('select[name="subcategories"]').append('\
<option value="' + item.id + '">' + item.name + '</option>\
');
});
})
.fail(function() {
// Любая ошибка
console.log("error");
})
.always(function() {
// Когда запрос завершился успешно или с ошибкой
console.log("complete");
});
});
</script>
</body>
</html>
Неполная серверная часть на PHP:
<?php
//Тут должна быть логика загрузки нужных дочерних
//категорий согласно пришедшему значению 'category' ($_POST['category'])
$subCategories = [
[
'id' => 1,
'name' => 'Дочерняя категория 1',
],
[
'id' => 2,
'name' => 'Дочерняя категория 2',
],
[
'id' => 3,
'name' => 'Дочерняя категория 3',
],
];
//json_encode превращяет массив PHP в JSON, который ждёт AJAX
exit(json_encode($subCategories));
?>
Простой