Tengo una selección (desplegable) y una entrada. Cuando ingreso un número en la entrada, seleccione el cambio de valor con ese número:
<input id="input" type="text" name="selectChanger"> <select id="select"> <option value="" selected></option> <option value="0">floor 0</option> <option value="1">floor 1</option> <option value="2">floor 2</option> </select>Quiero cuando cambie el valor de selección, muestre una alerta:
document.getElementById('input').addEventListener('input', function (event){ let de = new Event('change'); document.getElementById('select').dispatchEvent(de); document.getElementById('select').value = document.getElementById('input').value; }) document.getElementById('select').addEventListener('change', function (event){ alert(document.getElementById('select').text + ' was selected.') }) Ahora, cuando se ingresó el número 0, was selected la pantalla, y luego se seleccionó el número 1 para mostrar el floor 0 was selected pero debe mostrarse el floor 1 was selected .
¿Como puedo solucionar este problema?
Creo que esto te ayudará.
document.addEventListener('DOMContentLoaded', event => { const target_input = document.querySelector('#input'), target_select = document.querySelector('#select'); if (target_input != null) { target_input.addEventListener('input', event => { const { target } = event; for (const node of [...target_select.childNodes]) { if (node.nodeType == 1) { if (node.value == target.value) { node.selected = true; alert(`${node.textContent} is selected`) break; } } } }) } }); <input id="input" type="text" name="selectChanger"> <select id="select"> <option value="" selected></option> <option value="0">floor 0</option> <option value="1">floor 1</option> <option value="2">floor 2</option> </select>