Replace very large jS if/elseif/else to show/hide many divs?

Hi Forum,

I've got a page that has a portion of it that displays, or hides, DIV's depending on what option was selected.

There will be around 25 different div's when done, and while developing this I realize that the JS if/else is going to be quite verbose.

For example:

vehicleYearSelect.addEventListener('change', function() {
    if (this.value === '1960') {
        vehicleYear_1960.style.display = 'flex';
        vehicleYear_1961.style.display = 'none';
        vehicleYear_1962.style.display = 'none';
        vehicleYear_1963.style.display = 'none';
        vehicleYear_1964.style.display = 'none';
        vehicleYear_1965.style.display = 'none';
        ...
        [many more years here]
    } else if (this.value === '1961') {
        vehicleYear_1960.style.display = 'none';
        vehicleYear_1961.style.display = 'flex';
        vehicleYear_1962.style.display = 'none';
        vehicleYear_1963.style.display = 'none';
        vehicleYear_1964.style.display = 'none';
        vehicleYear_1965.style.display = 'none';
                ...
        [many more years here]
    } else if (this.value === '1962') {
        vehicleYear_1960.style.display = 'none';
        vehicleYear_1961.style.display = 'none';
        vehicleYear_1962.style.display = 'flex';
        vehicleYear_1963.style.display = 'none';
        vehicleYear_1964.style.display = 'none';
        vehicleYear_1965.style.display = 'none';
                ...
        [many more years here]
    } else if (this.value === '1963') {
        vehicleYear_1960.style.display = 'none';
        vehicleYear_1961.style.display = 'none';
        vehicleYear_1962.style.display = 'none';
        vehicleYear_1963.style.display = 'flex';
        vehicleYear_1964.style.display = 'none';
        vehicleYear_1965.style.display = 'none';
                ...
        [many more years here]
    } else if (this.value === '1964') {
        vehicleYear_1960.style.display = 'none';
        vehicleYear_1961.style.display = 'none';
        vehicleYear_1962.style.display = 'none';
        vehicleYear_1963.style.display = 'none';
        vehicleYear_1964.style.display = 'flex';
        vehicleYear_1965.style.display = 'none';
                ...
        [many more years here]
    } else {
        vehicleYear_1960.style.display = 'none';
        vehicleYear_1961.style.display = 'none';
        vehicleYear_1962.style.display = 'none';
        vehicleYear_1963.style.display = 'none';
        vehicleYear_1964.style.display = 'none';
        vehicleYear_1965.style.display = 'none';
                ...
        [many more years here]
    }
});


Is there a way to make this more "efficient" in terms of maintainability and having to add new options selected to it?

Example, if I need to add else if (this.value === '1965') and else if (this.value === '1966') to this, I'll need to not only add two more else if's, but also add both of the respective tyle.display = 'none'; or tyle.display = 'flex'; to each of the other existing conditions. etc....

There wont' be very many people using this form as it's not public facing, so speed is not a huge concern here.

Just looking for a way to improve this.

How about something like this?

Code:

document.getElementById('yearSelect').addEventListener('change', function() {
    document.querySelectorAll('.vehicleYear').forEach(element => {
        element.style.display = 'none';
    });
    const selectedYear = 'vehicleYear_' + this.value;
    const elementToShow = document.getElementById(selectedYear);
    if (elementToShow) {
        elementToShow.style.display = 'flex';
    }
});