html中select跟图片关联的具体代码
时间: 2024-05-12 17:15:08 浏览: 10
下面是一个简单的示例代码,展示了如何在HTML中使用`<select>`元素和图片关联:
```
<!DOCTYPE html>
<html>
<head>
<title>选择图片示例</title>
</head>
<body>
<label for="img-select">选择一张图片:</label>
<select id="img-select">
<option value="img1.jpg">图片1</option>
<option value="img2.jpg">图片2</option>
<option value="img3.jpg">图片3</option>
</select>
<br>
<img id="selected-img" src="" alt="所选图片">
<script>
// 获取select元素和img元素
var select = document.getElementById("img-select");
var img = document.getElementById("selected-img");
// 添加事件监听器,当选项改变时更新图片
select.addEventListener("change", function() {
img.src = select.value;
});
</script>
</body>
</html>
```
在这个示例中,我们使用`<select>`元素创建一个下拉菜单,其中每个选项都与一个图片文件关联。当用户选择一个选项时,通过JavaScript获取选项的值,并将其设置为`<img>`元素的`src`属性,以显示所选图片。