[英]How to run a javascript function when selecting a specific selection?
I am thinking of running a javascript function when selecting a specific selection, such as:我正在考虑在选择特定选择时运行 javascript function,例如:
<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:如果我输入 select “orange”,就会弹出一张橙色的图片,如下所示:
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?我怎样才能得到这个 javascript 工作?
PS: Is there methods without jquery? PS:没有jquery有方法吗?
You can add eventListener
to onchange
event, check the value, and add custom logic to handle it.您可以将eventListener
添加到onchange
事件,检查值,并添加自定义逻辑来处理它。 No need of jquery!不需要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.将图像链接存储在 object 中,然后当您的选项更改时用它更新元素。
// 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. eg: <select onchange="myFunction()">
只需添加一个 onChange 事件,在 onChange 中你可以调用任何 js function。例如: <select onchange="myFunction()">
Use addEventListener使用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() {...});
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>
Without jQuery you can do something like this:没有 jQuery 你可以这样做:
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/ https://jsfiddle.net/ahvftgL7/
In your html file, // Use ID to make the select container unique在您的 html 文件中,// 使用 ID 使 select 容器唯一
<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(),在你的js文件中,你可以调用function onChangeFruit(),
function onChangeFruit() {
console.log(document.getElementById("selectedFruit").value);
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.