Help modifying function to work the same in Chrome and Firefox

I have this dropdown menu:

<section id="dropDownSection">
            <div class="bgText"><p class="dropText">WHAT SHOULD I EAT IF I AM <select class="dropdown_options">
                <option selected hidden>SELECT ONE</option>
                <option value="AVOIDING DAIRY">AVOIDING DAIRY</option>
                <option value="AVOIDING FAT">AVOIDING FAT</option>
                <option value="COUNTING CALORIES">COUNTING CALORIES</option>
                <option value="AVOIDING CARBS">AVOIDING CARBS</option>
                <option value="GLUTEN FREE">GLUTEN FREE</option>
                <option value="AVOIDING SODIUM">AVOIDING SODIUM</option>
                <option value="VEGETARIAN">VEGETARIAN</option>
                <option value="AVOIDING SUGAR">AVOIDING SUGAR</option>
                <option value="VEGAN">VEGAN</option>
                <option value="PALEO">PALEO</option>
                <option value="ADDING PROTEIN">ADDING PROTEIN</option>
            </select>?</p></div>
        </section>

I have some JS code to open a grid section underneath that shows the foods that you can eat with each option, and it works perfectly in Firefox, but not in Chrome. I get no console errors in Chrome.

After messing around a little bit, I found if I replace the OPTIONS variable to document.querySelectorAll(‘select’);, it starts to work in Chrome, but not how I would like. With this, I only have to press the button and the grid section will open up, without having to select any options. And because the first value shown is the SELECT ONE option, an empty grid section will appear. The same thing happens in Firefox.

Is there a way I can select only the options in Chrome that will also work in Firefox? I don’t understand why I can’t target the options in Chrome with the event listener.

// DROPDOWN FOOD RECOMMENDATIONS SECTION //

const OPTIONS = document.querySelectorAll('.dropdown_options option');

function showFoodMenu() {
    const FOOD_SECTION = document.getElementById('food_rec'),
    FOOD = document.querySelectorAll('.js-food-item'),
    DAIRY = document.querySelectorAll('.dairy'),
    FAT = document.querySelectorAll('.fat'),
    CALORIES = document.querySelectorAll('.calories'),
    CARBS = document.querySelectorAll('.carbs'),
    GLUTEN = document.querySelectorAll('.gluten'),
    SODIUM = document.querySelectorAll('.sodium'),
    VEG = document.querySelectorAll('.veg'),
    SUGAR = document.querySelectorAll('.sugar'),
    VEGAN = document.querySelectorAll('.vegan'),
    PALEO = document.querySelectorAll('.paleo'),
    PROTEIN = document.querySelectorAll('.protein'),
    TITLE = document.querySelector('.food_rec_title');

    FOOD.forEach(item => item.style.display = 'none');

    FOOD_SECTION.style.display = 'flex';

    switch(this.value){
        case 'AVOIDING DAIRY':
            TITLE.innerHTML = 'DAIRY FREE PRODUCTS';
            DAIRY.forEach(food => food.style.display = 'block');
            break;
        case 'AVOIDING FAT':
            TITLE.innerHTML = 'AVOIDING FAT ITEMS',
            FAT.forEach(food => food.style.display = 'block');
            break;
        case 'COUNTING CALORIES':
            TITLE.innerHTML = 'COUNTING CALORIES ITEMS',
            CALORIES.forEach(food => food.style.display = 'block');
            break;
        case 'AVOIDING CARBS':
            TITLE.innerHTML = 'AVOIDING CARBS ITEMS',
            CARBS.forEach(food => food.style.display = 'block');
            break;
        case 'GLUTEN FREE':
            TITLE.innerHTML = 'GLUTEN FREE ITEMS',
            GLUTEN.forEach(food => food.style.display = 'block');
            break;
        case 'AVOIDING SODIUM':
            TITLE.innerHTML = 'AVOIDING SODIUM ITEMS',
            SODIUM.forEach(food => food.style.display = 'block');
            break;
        case 'VEGETARIAN':
            TITLE.innerHTML = 'VEGETARIAN ITEMS',
            VEG.forEach(food => food.style.display = 'block');
            break;
        case 'AVOIDING SUGAR':
            TITLE.innerHTML = 'AVOIDING SUGAR ITEMS',
            SUGAR.forEach(food => food.style.display = 'block');
            break;
        case 'VEGAN':
            TITLE.innerHTML = 'VEGAN ITEMS',
            VEGAN.forEach(food => food.style.display = 'block');
            break;
        case 'PALEO':
            TITLE.innerHTML = 'PALEO ITEMS',
            PALEO.forEach(food => food.style.display = 'block');
            break;
        case 'ADDING PROTEIN':
            TITLE.innerHTML = 'ADDING PROTEIN ITEMS',
            PROTEIN.forEach(food => food.style.display = 'block');
            break;
    }
}

OPTIONS.forEach(option => option.addEventListener('click', showFoodMenu));

Here’s the beginning portions of the grid code just for clarity of what is being displayed when clicked:

        <!--Dropdown food recommendation section-->
        <section id="food_rec">
            <h2 class="food_rec_title">Placeholder</h2>
            <div class="food_rec_grid">
                <div class="js-food-item dairy carbs gluten sugar paleo protein">
                    <img src="./Chipotle-Clone-Images/Food_rec_items/barbacoa.png" alt="Barbacoa" />
                    <p class="food_rec_grid-name">Barbacoa</p>
                </div>
                <div class="js-food-item dairy fat calories gluten veg sugar vegan protein">
                    <img src="./Chipotle-Clone-Images/Food_rec_items/black-beans.png" alt="Black Beans" />
                    <p class="food_rec_grid-name">Black Beans</p>
                </div>
                            <!--Lots more food items below-->
const opts = document.querySelector('#dropDownSection');

opts.addEventListener('change', (e) => {
  console.log(e.target.value); // just printing value to demonstrate
  switch(e.target.value) {
   case "AVOIDING DAIRY":
     // etc etc
  }
});

Gets the value of the currently selected option and delegates to the switch statement. The select is the thing you want to select, because that has the currently selected value available in the JS API for it.

https://codepen.io/DanielCouper/pen/BaaBMWQ?editors=1111

Thanks for the reply, I’ll try this out! Do you happen to know why it worked in Firefox with how I had it, though, and not Chrome?