根据下拉框的选项来显示对应的图片。如下图所示:(用select里面的 onchange事件)。
时间: 2024-06-09 19:07:57 浏览: 6
你可以使用以下代码实现:
HTML代码:
```html
<select id="select">
<option value="image1">图片1</option>
<option value="image2">图片2</option>
<option value="image3">图片3</option>
</select>
<div id="image-container"></div>
```
JavaScript代码:
```javascript
const select = document.getElementById("select");
const imageContainer = document.getElementById("image-container");
select.onchange = function() {
const selectedValue = this.value;
let imageURL = "";
switch(selectedValue) {
case "image1":
imageURL = "https://example.com/image1.jpg";
break;
case "image2":
imageURL = "https://example.com/image2.jpg";
break;
case "image3":
imageURL = "https://example.com/image3.jpg";
break;
default:
imageURL = "";
}
imageContainer.innerHTML = imageURL ? `<img src="${imageURL}" alt="Selected Image">` : "";
}
```
这段代码监听 `select` 元素的 `onchange` 事件,当用户选择一个选项时,根据选项的值设置对应的图片URL,然后将图片插入到 `image-container` 元素中。如果用户选择了空选项,就清空 `image-container` 中的内容。