I'm attempting to adapt a solution that I found (here: https://stackoverflow.com/a/2155924/3394918) to a problem I'm having, and can't seem to get it to work. I have several automatically generated menus with select elements that need to change based on user choices. In the linked question above, the user wanted to disable options based on values, however I want to disable (and enable) them based on class. I thought it would be an easy transition, but I haven't been able to figure out what I'm doing wrong.

The original answer:

document.querySelectorAll("#foo option").forEach(opt => {
    if (opt.value == "StackOverflow") {
        opt.disabled = true;
    }
});

What I did with it:

document.querySelectorAll(".models1and2Option").forEach((option) => {
  option.disabled = true;
  option.hidden = true;
});

document.querySelectorAll(".model3Option").forEach((option) => {
  option.disabled = false;
  option.hidden = false;
});

Where each option has a class based on which user choice (model) it corresponds to. Example:

<option class="model3Option" disabled hidden value="Projected Revenue: Incentive Funding">Projected Revenue: Incentive Funding</option>

Not only is nothing changing when I test, when I console.log() document.querySelectorAll(".model3Option") the console says the NodeList is empty (but it's not empty when I test other classes that aren't attached to option elements), so I suspect I have a major error in my assumptions on how the code should be working.