javascript - 通过下拉菜单选择时如何添加图片事件？

Question

这是我的 HTML 代码:

<select>
<option>Pic1</option>
<option>Pic2</option>
<option>Pic3/option>
<option>Pic4</option>
</select>

抱歉我的代码， 我主要是在 shcool 学习

我想创建一个事件，当在 75% 的宽度中选择选项标签并居中于屏幕时添加图片

我还没有完全了解 javascript，很抱歉

Answer 1

您可以使用 jquery 并在更改事件上更改图像， 我使用 data 属性来获取图像网址:

请参阅下面的代码片段

$(function(){
  $("#select-pic").on("change",function(e){
     var url = $(this).find(':selected').data('pic-url');
     
     if(url) {
        $("#picture").attr('src',url);
     }
     else {
        $("#picture").attr("src", "");
     }
  })
  
});

#picture {
  width:70%;
  height:200px;
  position:relative;
  margin:auto;
}

.container {
  text-align:center;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="select-pic">
  <option></option>
  <option data-pic-url='https://dummyimage.com/500x200/e85d00/6b7de0.png&text=+picture1' >Pic1</option>
  <option data-pic-url='https://dummyimage.com/500x200/e85d00/6b7de0.png&text=+picture2' >Pic2</option>
  <option data-pic-url='https://dummyimage.com/500x200/e85d00/6b7de0.png&text=+picture3' >Pic3</option>
  <option data-pic-url='https://dummyimage.com/500x200/e85d00/6b7de0.png&text=+picture4' >Pic4</option>
</select>

<div class="container">
  <img id="picture" />
</div>