如何在选择特定选项时运行 JavaScript 函数?
我考虑在选择特定选择时运行JavaScript功能,例如:
<select name="fruit">
<option value="1">orange</option>
<option value="2">apple</option>
<option value="3">banana</option>
</select>
如果选择“橙色”,橙色的图片将弹出,例如:
function department() {
let form = document.basic;
let choice = form.fruit.value;
if (choice === 1) {
document.getElementById("orange_img").style.display = "inherit";
}
}
如何获得此JavaScript工作?
ps:是否有没有jQuery的方法?
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?
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

发布评论
评论(7)
国产ˉ祖宗2025-01-25 08:10:46
// 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() {...});
甜味超标?2025-01-25 08:10:46
一种方法
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>
绳情2025-01-25 08:10:46
将链接存储到对象中的链接,然后当您的选项更改时,请使用它更新元素。
// 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>
静若繁花2025-01-25 08:10:46
在您的HTML文件中,//使用ID使
<select name="fruit" id="selectedFruit" onchange="onChangeFruit()">
<option value="1">orange</option>
<option value="2">apple</option>
<option value="3">banana</option>
</select>
JS文件中的“选择容器”唯一,您可以调用函数OnChangeFruit(),
function onChangeFruit() {
console.log(document.getElementById("selectedFruit").value);
}
~没有更多了~
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
您可以将
EventListener
添加到onChange
事件,检查值,然后添加自定义逻辑来处理它。不需要jQuery!You can add
eventListener
toonchange
event, check the value, and add custom logic to handle it. No need of jquery!