根据下拉框的选项来显示对应的图片(用select里面的 onchange事件)。
时间: 2023-06-16 14:02:22 浏览: 248
下拉列表显示图片
4星 · 用户满意度95%
好的,下面是一个示例代码,供你参考:
HTML 代码:
```html
<select id="selectImg" onchange="showImage()">
<option value="">请选择一张图片</option>
<option value="img1">图片1</option>
<option value="img2">图片2</option>
<option value="img3">图片3</option>
</select>
<div id="imageContainer"></div>
```
JavaScript 代码:
```javascript
function showImage() {
const selectElement = document.getElementById("selectImg");
const selectedValue = selectElement.value;
const imageContainer = document.getElementById("imageContainer");
switch (selectedValue) {
case "img1":
imageContainer.innerHTML = '<img src="path/to/img1">';
break;
case "img2":
imageContainer.innerHTML = '<img src="path/to/img2">';
break;
case "img3":
imageContainer.innerHTML = '<img src="path/to/img3">';
break;
default:
imageContainer.innerHTML = '';
break;
}
}
```
这段代码会在 select 元素的 onchange 事件触发时调用 showImage 函数。该函数会根据 select 元素的 value 值来决定显示哪张图片,然后将对应的图片插入到 id 为 imageContainer 的 div 中。如果没有选中任何选项,则会清空该 div。
阅读全文