写一个 HTML 中 下拉列表 选择 回调 例程
时间: 2024-02-15 07:22:59 浏览: 21
当用户选择下拉列表中的选项时,可以使用 JavaScript 中的回调函数来处理选择事件。以下是一个HTML中下拉列表选择回调的例程:
```html<!DOCTYPE html>
<html>
<head>
<title>下拉列表选择回调例程</title>
</head>
<body>
<h2>选择水果:</h2>
<select id="fruitSelect" onchange="handleSelection()">
<option value="">请选择</option>
<option value="apple">苹果</option>
<option value="banana">香蕉</option>
<option value="orange">橙子</option>
</select>
<script>
function handleSelection() {
var selectElement = document.getElementById("fruitSelect");
var selectedValue = selectElement.value;
switch (selectedValue) {
case "apple":
alert("你选择了苹果!");
break;
case "banana":
alert("你选择了香蕉!");
break;
case "orange":
alert("你选择了橙子!");
break;
default:
// 如果选择了默认选项或者未选择任何选项
alert("请选择一种水果!");
break;
}
}
</script>
</body>
</html>
```
在上面的例程中,我们创建了一个下拉列表(select)元素,并添加了几个选项(options)。当用户选择其中一个选项时,`onchange` 事件会触发 `handleSelection` 函数。该函数会获取当前选中的值,然后使用 switch 语句根据选项的值执行不同的操作。在这个例子中,我们使用 `alert` 函数显示选择的水果。
请注意,这只是一个简单的例程,你可以根据自己的需求进行更改和扩展。