How do I hide images that don't match a dropdown selection

Viewed 29

please can you help. I have some images of different fruit (for example). I want to be able to filter what is displayed based on the colour selection of the drop down. So if Pear and Watermelon were green, selecting green would hide the other fruit etc. Clicking back to "Select Colour" would make all images visible again. I know it's in the Java code but I'm new and really struggling. Any help much appreciated.

Code as follows:

funtion() getSelectedValue {
  var selectedValue = document.getElementById("list").value;
}
h2 {
  color: gray;
  text-align: center;
}

img {
  border: 0px solid #ddd;
  border-radius: 5px;
  padding: 10px;
  width: 60px;
  visibility: show;
}
<select id="list" onChange="getSelectedValue()">
  <option value="SelectColour">Select Colour</option>
  <option value="green">green</option>
  <option value="red">red</option>
  <option value="yellow">yellow</option>

< 

</select>

<h2></h2>

<a><img src="pear.png" alt="pear"></a>
<a><img src="apple.png" alt="apple"></a>
<a><img src="watermelon.png" alt="watermelon"></a>
<a><img src="banana.png" alt="banana"></a>

0 Answers
Related