Tengo problemas para encontrar el valor de la opción seleccionada actualmente.
Esto es lo que he probado hasta ahora...
const status = document.getElementById("task-status"); let value = status.options[status.selectedIndex].value; console.log(value); <label for="task-status">Status</label> <select class="form-control" id="task-status" required> <option selected disabled value="">Select status</option> <option value="to do">To Do</option> <option value="review">Review</option> <option value="in progress">In Progress</option> <option value="done">Done</option> </select>Esto no imprime nada en la consola y no tengo idea de por qué.
Lo que quiero hacer en última instancia es verificar si la opción seleccionada por el usuario tiene un valor de "" (vacío), si es así, mostrar el error (selección no válida). De lo contrario, si la opción seleccionada por el usuario es !"" (no vacía), la selección es válida
Vale la pena señalar que estoy usando Bootstrap y sus formularios. No estoy seguro si eso podría tener un efecto.
He intentado buscar soluciones durante horas, así que realmente agradecería si alguien puede ayudar. Gracias
Es simplemente var x = document.getElementById("task-status").value; , consulte más en https://www.w3schools.com/jsref/prop_select_value.asp
Puede crear un eventListener para verificar el valor siempre que se detecte un cambio en el valor desplegable.
https://jsfiddle.net/hxo8a5dt/
const status = document.getElementById("task-status"); status.addEventListener("change", function(event){console.log(event.target.value)});Con todos los detectores de eventos, el evento se pasa automáticamente a la función a la que puede hacer referencia y verificar el valor.
También verifique console.log(event) y eche un vistazo a todas las otras cosas que contiene :)
En general, solo necesita usar el value pero hay momentos en los que desea encontrar el texto y el valor, por lo que .options.selectedIndex brinda esa posibilidad como se muestra a continuación.
const oSel=document.getElementById("task-status") oSel.addEventListener('change',function(e){ let value=this.value; let optval=oSel.options[oSel.options.selectedIndex].value; let opttext=oSel.options[oSel.options.selectedIndex].text; console.info('%s - %s - %s', value,optval,opttext); }); <label for="task-status">Status</label> <select class="form-control" id="task-status" required> <option selected disabled hidden>Select status <option value="to do">To Do! <option value="review">Review! <option value="in progress">In Progress! <option value="done">Done </select>