select列表框中的option选项显示图片

Posted 2023-03-18

先说一下我要的效果：

最好是能把图片直接显示在下拉列表中的选项中，如果不能达到或代码量太大的话那我就退而求其次，下拉列表中只显示文字，然后列表框旁边显示对应的图片。

再说一下我的要求：

1.图片不是存在该文件的同目录下，而是存储在相对于此目录的上级目录的images文件夹里。也就是"../images/",请在代码中设置好此目录。图片请用man.png,tel.png,mail.png做示例。
2.代码量要精简。
3.如果能不使用第三方语言（只用html,DTHTML,CSS)来实现的话是最好了。但如果实现困难或代码量太大的话，可以使用javascript和asp。其它种类的就免了，我看不懂。

我知道要求有点多，希望各位大虾见谅！小弟在此先行谢过！
忘记说明了。我是要在asp页面中使用这段代码的。需要得到一个select选项然后提交。所以一定得有返回值的。而不是单纯的显示效果。
loveOuyoko -的那个回答测试没有通过。只能显示一张固定的图片，没有因选项的改变而变换图片。

参考技术A <img id="image1" src="">
<select onchange="image1.src=this.value">
<option value="images/main.png" >main.png</option>
<option value="images/tel.png">tel.png</option>
<option value="images/mail.png">mail.png</option>
</select>

这个是简单。我在帮你想要显示图片的。要用到图层。。有些复杂本回答被提问者采纳 参考技术B 小意思，1分钟写完

<script>
function a(o)
img1.src="../images/"+o.value;


</script>
<select onchange=a(this)>
<option value="man.png">man</option>
<option value="mail.png">mail</option>
<option value="tel.png">tel</option>

</select>
<br>
图片：
<img id="img1" src="../images/man.png">