javascript - 在下拉选择中打印图像？

Question

我的 HTML 中有一个下拉选择器，我需要打印出链接到选择的图像。但我不知道如何开始。

<input type="text" id="TextVeld" class="form-control" placeholder="get value on option select">

<br><br>

<select name="cars" id="TextShow" class="form-control">
  <option value="Pizza0">Kies je pizza</option>
  <option value="Pizza1">Margherita</option>
  <option value="Pizza2">Carciofi</option>
  <option value="Pizza3">Marinara</option>
  <option value="Pizza4">Funghi</option>
  <option value="Pizza5">Calzone</option>
  <option value="Pizza6">Napoli</option>
  <option value="Pizza7">Romana</option>
  <option value="Pizza8">Quattro Formaggi</option>
</select>

<br><br>

<button type="button" name="button">Toon</button>
<button type="button" name="button" onclick="Kiezen()">Kies</button>

我确实找到了 an example这样做，但不是单击按钮。即使那样，当我将它添加到我的代码中时它也不起作用。

Answer 1

假设“Print out”的意思是“Show”，试试这个

var folder = "https://icco.co.uk/catalog/view/theme/iccqtheme/images/"
function showIt() {
  var pizza = document.getElementById("pizzas").value;
  document.getElementById("pizzaImage").src= folder + (pizza? pizza+".png" : "deliveroo.png");
}
window.addEventListener("load",function() {
  document.getElementById("toon").addEventListener("click",showIt); // click 
  document.getElementById("pizzas").addEventListener("change",showIt); // or change
});

<input type="text" id="TextVeld" class="form-control"
   placeholder="get value on option select">
</br></br>
<select name="pizzas" id="pizzas" class="form-control">
  <option value="">Kies je pizza</option>
  <option value="piza1">Margherita</option>
  <option value="piza2">Carciofi</option>
  <option value="piza3">Marinara</option>
  <option value="piza4">Funghi</option>
  <option value="piza5">Calzone</option>
  <option value="piza6">Napoli</option>
  <option value="piza7">Romana</option>
  <option value="piza8">Quattro Formaggi</option>
</select>

</br></br>

<button type="button" id="toon">Toon</button>
<button type="submit" name="button">Kies</button><br/>
<img id="pizzaImage" src="https://icco.co.uk/catalog/view/theme/iccqtheme/images/deliveroo.png" />