Creé una lista desplegable con nombres de autos. Quiero crear un evento en javascript que, después de seleccionar algunos elementos de la lista desplegable, se pasará al bloque div usando esa función. Por ejemplo, selecciono un Audi de mi lista desplegable y en el bloque div para imprimir es un Audi. Quiero crear un evento y una función que, después de seleccionar una de las opciones de la lista desplegable con esa función, se pasará al bloque gigante. Creé una función que toma el valor de un elemento de una lista desplegable, pero no sé cómo proceder para lograr mi objetivo. Aquí está mi código.
function jsFunction(value) { var div1 = document.getElementById('div1') var newparagraph = document.createElement("p"); newparagraph.innerText(value); div1.appendChild(newparagraph); } <select id="ddl" name="ddl" onmousedown="this.html='';" onchange="jsFunction(this.value);"> <option id="Audi1" value='1'>Audi</option> <option id="Mercedes2" value='2'>Mercedes</option> <option id="BMW3" value='3'>BMW</option> </select> <div id="div1"> </div>newparagraph.innerText = value; mostrará 1, 2 o 3
Necesitas el texto de las opciones
tenga en cuenta que envuelvo el código en un controlador de eventos de carga para que podamos colocar el código donde queremos incluirlo en la cabeza
window.addEventListener("load", function() { document.getElementById("ddl").addEventListener("change", function() { if (!this.value) return var div1 = document.getElementById('div1') var newparagraph = document.createElement("p"); newparagraph.textContent = 'You chose ' + this.options[this.selectedIndex].text; div1.appendChild(newparagraph); }); }); <select id="ddl" name="ddl"> <option value=''>Please select</option> <option value='1'>Audi</option> <option value='2'>Mercedes</option> <option value='3'>BMW</option> </select> <div id="div1"> </div>