点击按钮显示对应的图片

最新推荐文章于 2022-10-13 21:36:08 发布

zoekitty

最新推荐文章于 2022-10-13 21:36:08 发布

阅读量7.2k

点赞数 1

分类专栏： javascript

本文链接：https://blog.csdn.net/zoekitty/article/details/52170175

版权

javascript 专栏收录该内容

33 篇文章 1 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        img{display:none;}
    </style>
</head>
<body>
<form>
    <select name="test" οnchange="testimg(this.value)">
        <option value="-1">请选择</option>
        <option value="0" >图片1</option>
        <option value="1">图片2</option>
        <option value="2">图片3</option>
        <option value="3">图片4</option>
    </select>
</form>
<img id="imgshow" src="1.png" />

<script type="text/javascript">
   var arr=["1.png","2.png","3.png","4.png"];
    var imgShow=document.getElementById('imgshow');
    function testimg(val){
        if(val==-1){
            imgShow.style.display="none";
        }
        else{
            imgShow.style.display="block";
            imgShow.src=arr[val];
        }
    }
</script>
</body>
</html>

zoekitty

关注

1
点赞
踩
13

收藏

觉得还不错? 一键收藏
0
评论
点击按钮显示对应的图片

img{display:none;} 请选择图片1 图片2 图片3 图片4 var arr=["1.png","2.png","3.png","4.png"]; var imgShow=document.getElementById('imgshow');
复制链接

扫一扫