Estoy pensando en ejecutar una función de javascript al seleccionar una selección específica, como:
<select name="fruit"> <option value="1">orange</option> <option value="2">apple</option> <option value="3">banana</option> </select>Y si selecciono "naranja", aparecerá una imagen naranja como:
function department() { let form = document.basic; let choice = form.fruit.value; if (choice === 1) { document.getElementById("orange_img").style.display = "inherit"; } }¿Cómo puedo hacer que este javascript funcione?
PD: ¿Hay métodos sin jquery?
Puede agregar eventListener al evento onchange , verificar el valor y agregar lógica personalizada para manejarlo. ¡No hay necesidad de jquery!
const fruitSelect = document.getElementById('fruit'); fruitSelect.addEventListener('change', (e) => { const value = e.target.value; if(value === '1') { // corresponds to orange // do stuff here } }); <select name="fruit" id="fruit"> <option value="1">orange</option> <option value="2">apple</option> <option value="3">banana</option> </select>Almacene los enlaces a las imágenes en un objeto, y luego, cuando su opción cambie, actualice el elemento con él.
// List of images const images = { orange: 'https://dummyimage.com/100x100/ffa600/000.png', apple: 'https://dummyimage.com/100x100/2e8b56/000.png', banana: 'https://dummyimage.com/100x100/FFFF00/000.png' }; // Cache the elements const select = document.querySelector('select'); const div = document.querySelector('div'); // Add an event listener to the select select.addEventListener('change', handleChange, false); // Update the background image of the div // with the new image function handleChange() { const img = `url(${images[this.value]})`; div.style.backgroundImage = img; } div { height: 100px; width: 100px; } <select> <option disabled selected>Choose a colour</option> <option value="orange">orange</option> <option value="apple">apple</option> <option value="banana">banana</option> </select> <div></div>simplemente agregue un evento onChange y dentro de onChange puede invocar cualquier función js. por ejemplo: <select onchange="myFunction()">