选择特定选项时如何运行一个javascript函数？

Question

我正在考虑运行一个 javascript 函数，当 select 一个特定的 select 离子时，例如：

<select name="fruit">
<option value="1">orange</option>
<option value="2">apple</option>
<option value="3">banana</option>
</select>

如果我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的方法？

Answer 1

只需添加一个onChange 事件，在onChange 中你可以调用任何js 函数。例如：<select onchange="myFunction()">

Answer 2

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

Answer 3

您可以将 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>

Answer 4

一种方法

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>

Answer 5

没有 jQuery 你可以这样做：

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

我假设表单的名称是“basic”（根据您的代码推断）。

https://jsfiddle.net/ahvftgL7/

Answer 6

将图像链接存储在一个对象中，然后当您的选项更改时用它更新元素。

// 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>

Answer 7

在您的 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>

在你的js文件中，你可以调用函数onChangeFruit(),

function onChangeFruit() {
  console.log(document.getElementById("selectedFruit").value);
}

选择特定选项时如何运行一个javascript函数？

How to run a javascript function when selecting a specific selection?

html

javascript

select