I am thinking of running a javascript function when selecting a specific selection, such as:
<select name="fruit">
<option value="1">orange</option>
<option value="2">apple</option>
<option value="3">banana</option>
</select>
And if I select "orange", a orange picture will pop out like:
function department() {
let form = document.basic;
let choice = form.fruit.value;
if (choice === 1) {
document.getElementById("orange_img").style.display = "inherit";
}
}
How can I get this javascript work?
PS: Is there methods without jquery?
You can add eventListener to onchange event, check the value, and add custom logic to handle it. No need of 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>Store the links to the images in an object, and then when your option changes update the element with it.
// 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>simply add an onChange event and inside the onChange you can invoke any js function. e.g: <select onchange="myFunction()">