当我选择一个选项时，选中的图像应该会出现，而其他图像应该会隐藏

Question

当用户选择一个选项(选项是图像)时，应显示选定的选项(图像)，并隐藏其余图像。

我已尝试添加图像，但无法隐藏图像

​

var image = document.querySelector('#image img');
document.getElementById('webmenu').onchange = function() {
  image.src = document.getElementById(this.options[this.selectedIndex].getAttribute('data-img')).src;
}

<div id="dropdown">
  <select name="webmenu" id="webmenu">
    <option value="4727c31d-8813-4921-9c2e-320d39e2a8dd" data-img="bigImg1">Option 1</option>
    <option value="916607ea-b0f6-4553-887c-d02a16ac4fcd" data-img="bigImg2">Option 2</option>
    <option value="a4a5fdab-86a0-4c3f-acbd-0a9a747698dc" data-img="bigImg3">Option 3</option>
  </select>
</div>


<div id="image">
  <img src="#" class="imagechange">
</div>

<img id="bigImg1" src="https://lh4.ggpht.com/zQIXMNP87brRkMSRRiALQkgF-JRQeBW5vMgqwUt3xMwKw3yeZeZyH1GU6lzXNbDBuRM=w300">
<img id="bigImg2" src="https://lh3.googleusercontent.com/62kbzMH6YNZKg1eAbgDNZzPe3UyP86_CovtA14fSNsFXoCBi3RYzLPegjHRwiMyF7Q=w300">
<img id="bigImg3" src="https://demos.algorithmia.com/colorize-photos/public/images/yosemite.png">

​

Answer 1

您可以向图像添加一个类hidden并放置一个css .hidden { display: none;}。

​

var image = document.querySelector('#image img');
document.getElementById('webmenu').onchange = function() {
  image.src = document.getElementById(this.options[this.selectedIndex].getAttribute('data-img')).src;
}

.hidden {
 display: none; 
}

<div id="dropdown">
  <select name="webmenu" id="webmenu">
    <option value="4727c31d-8813-4921-9c2e-320d39e2a8dd" data-img="bigImg1">Option 1</option>
    <option value="916607ea-b0f6-4553-887c-d02a16ac4fcd" data-img="bigImg2">Option 2</option>
    <option value="a4a5fdab-86a0-4c3f-acbd-0a9a747698dc" data-img="bigImg3">Option 3</option>
  </select>
</div>


<img id="bigImg1" class="hidden" src="https://lh4.ggpht.com/zQIXMNP87brRkMSRRiALQkgF-JRQeBW5vMgqwUt3xMwKw3yeZeZyH1GU6lzXNbDBuRM=w300">
<img id="bigImg2" class="hidden" src="https://lh3.googleusercontent.com/62kbzMH6YNZKg1eAbgDNZzPe3UyP86_CovtA14fSNsFXoCBi3RYzLPegjHRwiMyF7Q=w300">
<img id="bigImg3" class="hidden" src="https://demos.algorithmia.com/colorize-photos/public/images/yosemite.png">


<div id="image">
  <img src="" class="imagechange">
</div>

​