Estoy intentando adaptar una solución que encontré (aquí: https://stackoverflow.com/a/2155924/3394918 ) a un problema que tengo, y parece que no puedo hacer que funcione. Tengo varios menús generados automáticamente con elementos seleccionados que deben cambiar según las elecciones del usuario. En la pregunta vinculada anterior, el usuario quería deshabilitar las opciones según los valores, sin embargo, quiero deshabilitarlas (y habilitarlas) según la clase. Pensé que sería una transición fácil, pero no he podido darme cuenta de lo que estoy haciendo mal.

La respuesta original:

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

Lo que hice con eso:

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

Donde cada opción tiene una clase basada en la elección del usuario (modelo) a la que corresponde. Ejemplo:

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

No solo no cambia nada cuando pruebo, cuando pruebo console.log() document.querySelectorAll(".model3Option") la consola dice que NodeList está vacío (pero no está vacío cuando pruebo otras clases que no están adjuntas a elementos de opciones ), por lo que sospecho que tengo un error importante en mis suposiciones sobre cómo debería funcionar el código.