我希望下拉菜单选项在选择不同的选项时能够发布不同的图像

Question

Here is my basic pull down selection tabs. How do I get each choice to post a different image (preferably html source images) when selected.

I would like the images to post within the div as well if possible.

 <div id= "PERSONAL">
   <p id= "Range"> Preferred Distance </p>
     <select class= "Distance" onchange="report(this.value)">
`     <option value="Pick3">Pick Your Range</option>
      <option value="100 Miles">100 Miles</option>
      <option value="1000 Miles">1000 Miles</option>
      <option value="More than 2000 Miles">More than 2000 Miles</option>
      <option value="Around the World">Around the World</option>
     </select>

    <p id= "Weather"> Preferred Weather </p>
     <select class= "Weather" onchange="report(this.value)">
       <option value="Pick2">Pick Your Weather</option>
       <option value="Cold">Cold</option>
       <option value="Mild">Mild</option>
       <option value="Hot">Hot</option>
       <option value="Anything">Anything</option>
      </select>

    <p id= "Moisture"> Wet or Dry </p>
     <select class= "Moisture" onchange="report(this.value)">
      <option value="Pick1">Pick Your Moisture</option>
      <option value="Desert">Desert Dry</option>
      <option value="Moderate">Wet and Dry</option>
      <option value="Rainy">Jungle Wet</option>
      <option value="Snow">Snow Time!</option>
     </select>

   </div>

Answer 1

You could create a placeholder <img> tag inside your <div> and change src accordingly on change() .

Just expand on the sample that I provided.

Example