Как мне сделать так, чтобы при открытии одного селекта автоматически закрывались остальные?

Чтобы реализовать функциональность, при которой при открытии одного выпадающего списка автоматически закрываются остальные, вы можете использовать JavaScript для управления классами активного состояния. Вот пошаговый подход к реализации:

1. **Создайте общие классы**: Убедитесь, что все ваши селекты имеют общий класс или атрибут для удобства управления.

2. **Напишите JavaScript**: Используйте JavaScript для добавления обработчиков событий, которые будут слушать нажатие на селекты и закрывать остальные при открытии одного из них.

### Пример HTML-кода

```html
<div class="header__select select" data-js-select>
    <ul class="select__list" data-js-select-list>
        <li><a class="select__link header__menu-link" href="/" data-js-select-link>Version</a></li>
        <li><a class="select__link header__menu-link" href="/" data-js-select-link>Release</a></li>
        <li><a class="select__link header__menu-link" href="/" data-js-select-link>Beta</a></li>
        <li><a class="select__link header__menu-link" href="/" data-js-select-link>Alpha</a></li>
    </ul>
</div>

<div class="header__select select" data-js-select>
    <ul class="select__list" data-js-select-list>
        <li><a class="select__link header__menu-link" href="/" data-js-select-link>Option 1</a></li>
        <li><a class="select__link header__menu-link" href="/" data-js-select-link>Option 2</a></li>
    </ul>
</div>
```

### Пример JavaScript-кода

```javascript
document.addEventListener('DOMContentLoaded', () => {
    const selects = document.querySelectorAll('[data-js-select]');

    selects.forEach(select => {
        const list = select.querySelector('[data-js-select-list]');

        select.addEventListener('click', () => {
            // Закрываем все другие селекты
            selects.forEach(otherSelect => {
                if (otherSelect !== select) {
                    otherSelect.classList.remove('is-active');
                    otherSelect.querySelector('[data-js-select-list]').classList.remove('is-active');
                }
            });

            // Тогглим текущий селект
            select.classList.toggle('is-active');
            list.classList.toggle('is-active');
        });
    });
    
    // Закрываем селекты при клике вне их области
    document.addEventListener('click', (event) => {
        if (!event.target.closest('[data-js-select]')) {
            selects.forEach(select => {
                select.classList.remove('is-active');
                select.querySelector('[data-js-select-list]').classList.remove('is-active');
            });
        }
    });
});
```

### Пояснения к коду:

- **Слушаем событие клика на селектах**: Каждый раз, когда пользователь нажимает на селект, срабатывает обработчик событий. Мы закрываем все остальные селекты и открываем тот, на который кликнули.

- **Закрытие при клике вне селектов**: Добавляем обработчик для клика по всему документу, чтобы закрыть открытые селекты, если кликнули вне их области.

- **Классы для отображения и скрытия**: Вы должны определить стиль для `.is-active` в вашем CSS, который будет отображать выпадающий список.

### Пример CSS-стилей

Добавьте стили для класса `.is-active`:

```css
.select__list {
    display: none;
}

.select__list.is-active {
    display: flex; 
}
```

С помощью этого подхода вы сможете управлять состоянием выпадающих списков, открывая один и закрывая остальные.