Descargo de responsabilidad: Parece que esto ya se ha preguntado de forma similar varias veces, pero ninguna de las soluciones me ha funcionado. Además, la mayoría de las soluciones parecen tener más de 4 años (hasta 12+), quién sabe qué cambió en ese momento, yo ciertamente no.
El problema: quiero ocultar todas las opciones en una selección y solo "mostrarlas" según lo que se elija en otra selección.
Tengo dos selecciones:
<select id="pool" name="pool" onchange="cause_mod()"> <option value="none" selected disabled hidden>Pool</option> <option value="1">1</option> <option value="2">2</option> </select>y:
<select id="cause" name="cause"> <option value="none" selected hidden="true">cause/option> <option value="sale" hidden="true">sale</option> <option value="withdraw" id="withdraw" hidden>withdraw</option> <option value="deposit" style="display: none">deposit</option> </select>Las tres variaciones diferentes son para mostrar lo que ya probé en el lado seleccionado.
No publicaré todas las variaciones del código javascript, ya que simplemente sería demasiado. Publicaré tres variaciones que probé con las tres variaciones en la segunda selección:
function cause_mod(){ var pool = document.getElementById("pool"); var cause = document.getElementById("cause"); var deposit = document.querySelectorAll('option[value="deposit"]'); if(pool.value === "1"){ cause.options[1].setAttribute("hidden", true) document.getElementById("withdraw").removeAttribute("hidden") deposit.style.display = ""; } else if(pool.value === "2"){ pretty much the opposite } }Me pregunto si hay algún método conveniente (aunque en este punto también tomaré inconvenientes) para "tomar" opciones individuales de una selección para .hacer algo con ella.
El atributo hidden no debe establecerse en el valor booleano de JavaScript true , solo debe estar presente o establecerse en la cadena "hidden" :
const sel = document.querySelector("select"); sel.options[1].setAttribute("hidden", "hidden"); <select> <option>Item 1</option> <option>Item 2</option> <option>Item 3</option> </select> Ahora, si tiene una option que no debería tener ningún valor, configúrela en: value="" , no value="none" porque none es una cadena y, por lo tanto, se convertirá en el valor del elemento.
Además, establecer la propiedad CSS style.display en una cadena vacía no es aceptable, ya que este atributo debe establecerse en un valor de display de CSS válido.
Además, querySelectorAll() devuelve una lista de nodos, que es un objeto similar a una matriz. Las listas de nodos no tienen una propiedad de value . En su caso, si está buscando un solo elemento en su página, use querySelector() , que devolverá el primer elemento que coincida con el selector que proporcionó o undefined si no se encuentra ninguna coincidencia. Cuando hay una coincidencia, puede acceder a sus propiedades DOM, como value .
Por último, debe mover las declaraciones de variables pool , cause y deposit fuera de su función para que se reinicialicen cada vez que se llame a la función, esto es una pérdida de recursos para buscar los mismos elementos que ya buscó anteriormente.