如何在选择特定选项时运行 JavaScript 函数?

发布于 01-18 08:10 字数 638 浏览 5 评论 0原文

我考虑在选择特定选择时运行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 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(7

农村范ル2025-01-25 08:10:46

您可以将EventListener添加到onChange事件,检查值,然后添加自定义逻辑来处理它。不需要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>

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>

行雁书2025-01-25 08:10:46

只需添加一个Onchange事件,在Onchange内部您就可以调用任何JS功能。例如:&lt; select onChange =“ myFunction()”&gt;

simply add an onChange event and inside the onChange you can invoke any js function. e.g: <select onchange="myFunction()">

国产ˉ祖宗2025-01-25 08:10:46

使用 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() {...});

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() {...});
甜味超标?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>

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>

悲凉≈2025-01-25 08:10:46

没有jQuery,您可以做这样的事情:

const fruitSelect = document.basic.fruit;
fruitSelect.addEventListener('change', (event) => {
    department();
});

我假设Form的名称为“基本”(从您的代码中推断出)。

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/

绳情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>

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>

静若繁花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);
}

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);
}
~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文