0
134
ViewsMuestra lo seleccionado de una lista desplegable (javascript o jquery)
Quiero crear un formulario en el que el usuario tenga dos opciones para cargar imágenes, ya sea pasaporte, documento de identidad o licencia de conducir, pero quiero que cuando el usuario elija una casilla de pasaporte, si elige una tarjeta de identidad o una licencia de conducir. , dos atrás y adelante
<form action=""> <select > <option >PASSPORT</option> <option >ID CARD</option> <option >DRIVER LICENSE</option> </select><BR><BR> <input type="file" id="myFile" name="PASSPORT"><BR><BR> <input type="file" id="myFile" name="FRONT ID"><BR><BR> <input type="file" id="myFile" name="BACK ID"><BR><BR> <input type="file" id="myFile" name="BACK DRIVER LICENSE"><BR><BR> <input type="file" id="myFile" name="BACK DRIVER LICENSE"><BR><BR> <input type="submit"> </form>Ejemplo:
1 answers
Answer question0
Aquí hay una forma de hacerlo:
(document.querySelector("select").onchange=ev=>{ document.querySelectorAll("input[type=file]").forEach(e=>{ e.style.display=ev.target.value.toLowerCase().replaceAll(" ","")===e.className ? "block" : "none"; }) })({target:{value:"passport"}}); input[type=file] {margin:10px 0px} <form action=""> <select > <option >PASSPORT</option> <option >ID CARD</option> <option >DRIVER LICENSE</option> </select><BR><BR> <input type="file" class="passport" name="PASSPORT"> <input type="file" class="idcard" name="FRONT ID"> <input type="file" class="idcard" name="BACK ID"> <input type="file" class="driverlicense" name="FRONT DRIVER LICENSE"> <input type="file" class="driverlicense" name="BACK DRIVER LICENSE"> <input type="submit"> </form> Reemplacé sus atributos de id no válidos con un atributo de class y adjunté un detector de eventos en el elemento select . Tan pronto como se activa el evento, el valor del cuadro de selección se usa para el atributo style.display de los elementos de entrada para "bloquear" o "ninguno".
Al poner toda la definición de la función entre paréntesis () y agregar el argumento ({target:{value:"passport"}}) después, simulo efectivamente la activación de un evento con un argumento falso de "objeto de evento" que contiene un solo atributo /sub-atributo: target.value == "passport" . Esto hará visible el primer grupo de entrada mientras oculta todos los demás.