Sé que esta es una pregunta simple. Pero no pude encontrar una manera de superar este problema. Todo lo que quiero es esto. Tengo un menú desplegable creado usando el elemento de selección y cuando el usuario selecciona una ciudad de ese menú desplegable, debería poder pasar ese valor seleccionado a la consola (console.log()). Pero solo puedo pasar el primer valor seleccionado. Encontré una manera de pasar valores a la consola usando onChange() con el elemento seleccionado como el siguiente código.
<select id="comboA" onchange="getComboA(this)"> <option value="">Select combo</option> <option value="Value1">Text1</option> <option value="Value2">Text2</option> <option value="Value3">Text3</option> </select> function getComboA(selectObject) { var value = selectObject.value; console.log(value); }Pero en mi caso, todo el procedimiento debe ser un código sin usar onChange() en HTML. Porque tengo que obtener entradas de usuario del formulario de WordPress y necesito hacer un archivo JS separado del formulario. Por lo tanto, no puedo agregar ni cambiar el código HTML del formulario. Mi código está abajo.
<select name="city" class="city" id="city-selection"> <option selected="selected" value="">Select City</option> <option value="City 1">City 1</option> <option value="City 2">City 2</option> <option value="City 3">City 3</option> <option value="City 4">City 4</option> <option value="City 5">City 5</option> <option value="City 6">City 6</option> <option value="City 7">City 7</option> </select>El código JS que utilicé está debajo.
var cityVal = document.getElementById("city-selection"); var cityCon = cityVal.options[cityVal.selectedIndex].text; console.log(cityCon);Por favor ayudame con este problema.
const selectElement = document.querySelector('#city-selection'); const changeHandler = (ev) => { console.log('Change!', ev.target.value); } selectElement.addEventListener('change', changeHandler); <select name="city" class="city" id="city-selection"> <option selected="selected" value="">Select City</option> <option value="City 1">City 1</option> <option value="City 2">City 2</option> <option value="City 3">City 3</option> <option value="City 4">City 4</option> <option value="City 5">City 5</option> <option value="City 6">City 6</option> <option value="City 7">City 7</option> </select>Por favor, eche un vistazo a este violín: violín
const selectCites = document.getElementById("city-selection"); selectCites.addEventListener("change", function(e) { e.preventDefault(); const { srcElement } = e; const { selectedOptions } = srcElement; for (let i = 0; i < selectedOptions.length; i++) { console.log(selectedOptions[i].value); console.log(selectedOptions[i].text); } })Básicamente, agregué un detector de eventos en la selección y esperé cualquier cambio y luego recorrí las opciones seleccionadas en caso de que tenga más de una.
Simplemente agregue EventListener para escuchar un evento de change :
document.addEventListener("change", function() { var cityVal = document.getElementById("city-selection"); var cityCon = cityVal.options[cityVal.selectedIndex].text; console.log(cityCon); }