HTML select on select 事件的名称是什么

1个回答

温心么

2025-06-21 12:45

水果

HTML 元素的 onchange 事件，我们可以实现当用户选择不同的选项时，页面上的内容动态变化的效果。下面是一个简单的案例代码：

html
<!DOCTYPE html>
<html>
<body>
<h2>选择你喜欢的水果：</h2>
<select id="fruitSelect" onchange="changeContent()">
  <option value="Apple">苹果</option>
  <option value="banana">香蕉</option>
  <option value="orange">橙子</option>
  <option value="grape">葡萄</option>
</select>
<div id="fruitContent">
  这里将显示你选择的水果的相关内容。
</div>
<script>
function changeContent() {
  var selectElement = document.getElementById("fruitSelect");
  var selectedValue = selectElement.value;
  var fruitContentElement = document.getElementById("fruitContent");
  if (selectedValue === "Apple") {
    fruitContentElement.innerHTML = "
<img src="https://img.izhida.com/topic/9f6290f4436e5a2351f12e03b6433c3c.jpg" alt="Apple"><br>Apple
苹果是一种红色的水果，它富含维生素和纤维，有助于健康。
";
  } else if (selectedValue === "banana") {
    fruitContentElement.innerHTML = "香蕉是一种黄色的水果，它富含钾和维生素C，有助于补充能量。
";
  } else if (selectedValue === "orange") {
    fruitContentElement.innerHTML = "橙子是一种橙色的水果，它富含维生素C和纤维，有助于增强免疫力。
";
  } else if (selectedValue === "grape") {
    fruitContentElement.innerHTML = "葡萄是一种紫色的水果，它富含抗氧化剂和维生素K，有助于保护心脏健康。
";
  }
}
</script>
</body>
</html>

在上面的代码中，我们创建了一个元素和 onchange 事件，我们可以实现动态内容变化的效果。用户选择不同的选项时，可以根据选择的值进行相应的操作，例如更新页面内容、执行特定的函数等。这种交互方式可以提升用户体验，使网页更加灵活和智能。

举报有用（4）分享收藏

HTML select on select 事件的名称是什么

1个回答

温心么

热门话题

相关问题