javascript下拉菜单示例
时间: 2024-06-23 21:02:40 浏览: 5
在JavaScript中创建下拉菜单(通常称为`<select>`元素)非常简单。这里有一个基本的示例:
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JavaScript下拉菜单示例</title>
</head>
<body>
<label for="dropdown">请选择一个选项:</label>
<select id="dropdown" onchange="showValue()">
<option value="">请选择</option>
<option value="option1">选项1</option>
<option value="option2">选项2</option>
<option value="option3">选项3</option>
</select>
<p id="selectedValue"></p>
<script>
function showValue() {
var dropdown = document.getElementById("dropdown");
var selectedOption = dropdown.options[dropdown.selectedIndex].value;
document.getElementById("selectedValue").innerText = "你选择了: " + selectedOption;
}
</script>
</body>
</html>
```
在这个例子中,我们创建了一个包含几个选项的下拉列表。当用户从下拉菜单中选择一个选项时,`onchange`事件会被触发,调用`showValue`函数。这个函数获取当前选中的`<option>`的值,并将其显示在页面上。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)