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?
CodePudding user response:
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>
CodePudding user response:
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>
CodePudding user response:
simply add an onChange event and inside the onChange you can invoke any js function. e.g: <select onchange="myFunction()">
CodePudding user response:
Use addEventListener
// Add id to select
<select name="fruit" id="fruit">
<option value="1">orange</option>
<option value="2">apple</option>
<option value="3">banana</option>
</select>
// Add event listener to select
const el = document.getElementById("fruit");
el.addEventListener("change", function() {...});
CodePudding user response:
One approach
const
orange = document.getElementById("orange")
apple = document.getElementById("apple")
banana = document.getElementById("banana");
orange.addEventListener('click', () => showPopUp('orange'))
apple.addEventListener('click', () => showPopUp('apple'))
banana.addEventListener('click', () => showPopUp('banana'))
function showPopUp(fruit){
alert(fruit) // <--- do something with the fruit
}
<select name="fruit">
<option value="1" id="orange">orange</option>
<option value="2" id="apple">apple</option>
<option value="3" id="banana">banana</option>
</select>
CodePudding user response:
Without jQuery you can do something like this:
const fruitSelect = document.basic.fruit;
fruitSelect.addEventListener('change', (event) => {
department();
});
I'm assuming form's name is "basic" (inferred from your code).
https://jsfiddle.net/ahvftgL7/
CodePudding user response:
In your html file, // Use ID to make the select container unique
<select name="fruit" id="selectedFruit" onchange="onChangeFruit()">
<option value="1">orange</option>
<option value="2">apple</option>
<option value="3">banana</option>
</select>
In your js file, you can invoke the function onChangeFruit(),
function onChangeFruit() {
console.log(document.getElementById("selectedFruit").value);
}