Как сделать форму поиска со связанными селектами в фильтре?

Для создания формы поиска со связанными селектами в фильтре вам потребуется использовать язык программирования JavaScript в сочетании с HTML и CSS.

Прежде всего, создайте HTML-разметку для формы. Ниже приведен пример минимальной разметки для формы с двумя селектами:

<form id="search-form">
  <select id="category-select">
    <option value="">Выберите категорию</option>
    <option value="1">Категория 1</option>
    <option value="2">Категория 2</option>
    <option value="3">Категория 3</option>
  </select>
  
  <select id="subcategory-select">
    <option value="">Выберите подкатегорию</option>
  </select>
  
  <button type="submit">Найти</button>
</form>

Затем напишите JavaScript-код, который будет отслеживать изменения значения первого селекта и динамически обновлять значения второго селекта в соответствии с выбранной категорией. В примере ниже используется DOM-событие change для отслеживания изменений первого селекта:

// Получаем элементы формы
const categorySelect = document.getElementById('category-select');
const subcategorySelect = document.getElementById('subcategory-select');

// Определяем значения подкатегорий для каждой категории
const subcategories = {
  1: ['Подкатегория 1.1', 'Подкатегория 1.2', 'Подкатегория 1.3'],
  2: ['Подкатегория 2.1', 'Подкатегория 2.2', 'Подкатегория 2.3'],
  3: ['Подкатегория 3.1', 'Подкатегория 3.2', 'Подкатегория 3.3'],
};

// Функция для обновления значений второго селекта
function updateSubcategorySelect() {
  const categoryId = categorySelect.value;
  
  // Очищаем второй селект
  subcategorySelect.innerHTML = '';
  
  // Добавляем опцию "Выберите подкатегорию"
  const defaultOption = document.createElement('option');
  defaultOption.value = '';
  defaultOption.textContent = 'Выберите подкатегорию';
  subcategorySelect.appendChild(defaultOption);
  
  // Добавляем подкатегории для выбранной категории
  if (subcategories[categoryId]) {
    const subcategoryOptions = subcategories[categoryId].map(subcategory => {
      const option = document.createElement('option');
      option.value = subcategory;
      option.textContent = subcategory;
      return option;
    });
    
    subcategoryOptions.forEach(option => {
      subcategorySelect.appendChild(option);
    });
  }
}

// Обновление значений второго селекта при изменении первого
categorySelect.addEventListener('change', updateSubcategorySelect);

В данном примере мы определяем объект subcategories, который содержит значения подкатегорий для каждой категории. Затем мы создаем функцию updateSubcategorySelect(), которая осуществляет обновление значений второго селекта в зависимости от выбранной категории. При изменении значения первого селекта вызывается эта функция.

Наконец, у вас должен быть серверный код, который будет обрабатывать отправку формы и выполнять необходимые операции поиска на основе выбранных значений.

Это базовый пример того, как сделать форму поиска со связанными селектами в фильтре с использованием JavaScript. Вы можете настроить и доработать его в соответствии с вашими конкретными потребностями.